CatalyzeUp
sondely/product

Marketing Landing Page

The public homepage at sondely.com. One React route (/) inside the same SPA that serves the app, rendered only on the canonical hosts (TenantAwareHome in App.tsx).

Implementation Progress

Section Status
Navigation with language picker and a booking call to action Done
Hero: the promise, plus change over time drawn with the real report components Done
The parcours: intake, mid, exit, and the 6 to 24 month follow-up Done
Interactive intake questionnaire, inside the parcours section Done
The change: stats, per-question table, comparison bars, written summary Done
The report: the first page of the PDF the export endpoint really produces Done
Participation: reminders, quiet hours, unsubscribe, QR, resume, 33 languages Done
Trust: Canadian hosting, Montreal, bilingual, small team, and what we do not claim Done
Final call to action Open: waiting on the lead-action decision (see Open questions)
Footer with contact, booking link and a developers page Done
Favicon, apple touch icon, Open Graph card, locale-aware <html lang> Done

Who the page is written for

A director of an insertion enterprise or a community organization in Montreal: an organization that takes people through a program of fixed length, owes a follow-up for up to 24 months afterwards, and has to account for the result to Services Québec, Centraide, a foundation or a caisse, each in its own format.

She arrives from an email, usually on a phone, usually in French, and decides in under a minute whether a conversation is worth her time. The page is therefore French first, uses her vocabulary (participantes et participants, parcours, accompagnement, bailleurs de fonds, reddition de comptes) rather than survey-tool vocabulary, and leads with her problem rather than with the product's features.

The market analysis rates employment integration as the beachhead segment; this page is that segment's landing page.

Rules the page holds itself to

These are not stylistic preferences. Each one exists because breaking it would cost credibility that cannot be bought back in a small, networked sector.

  1. No invented customers, logos, testimonials or statistics. Sondely has no reference organization yet, and the page says so where the demo cohort appears rather than implying otherwise.
  2. The demo cohort is fictional and labelled as fictional. No real organization is named anywhere on the page, including inside the generated PDF, whose header reads "Organisme de démonstration". Invented enterprise names were considered and dropped: in a sector this small, plausible names collide with real ones.
  3. Only shipped behaviour is claimed. Every feature named on the page is on the done list of the implementation status.
  4. "Your data stays in Canada", never "Law 25 compliant". The trust section states plainly that consent, retention and deletion on request are still being built.
  5. Real components, not screenshots. The change over time on the page is drawn by the same React components the impact report page renders.

Story, top to bottom

1. Hero

The promise in her language, and the change itself on the right: baseline against latest for the demo cohort, rendered with ImpactComparisonBars. Two calls to action, a 30 minute conversation and a free trial, plus one line placing Sondely in Montreal.

2. The parcours

A four point timeline: accueil (day 1), mi-parcours (month 3), fin du parcours (month 6), suivi postparticipation (6, 12, 18 and 24 months), each point the same short questionnaire. This is the section meant to make the visitor recognize her own program. The interactive demo lives inside it: three questions from a fictional questionnaire d'accueil, answered with the app's real QuestionRenderer, scored client side, no signup.

3. The change

ImpactStatsRow, ImpactQuestionTable and ImpactComparisonBars fed with the demo cohort, plus the auto-generated summary. The excluded single-attempt respondents are shown and explained rather than hidden. Below the large breakpoint the table is dropped and the bars carry the numbers, so a phone never scrolls sideways.

4. The report

The first page of the PDF that report_export.build_impact_pdf actually produces for the demo cohort, in French, regenerated by scripts/build_marketing_report.py. In this market the deliverable is the document, not the dashboard.

5. Participation

Escalating reminders, quiet hours, one-click unsubscribe, public link and QR code, resume where you left off, and the same questionnaire in 33 languages with comparable scores.

6. Trust

Data in Canada (Azure Canada Central), built in Montreal, French and English by design, sized for a small team, and an explicit paragraph on what Sondely does not claim.

7. Call to action

Open. See the question below.

Contact address, booking link, and the links to the app's own public pages. The API section moved off the homepage to its own /developers route.

Demo data

frontend/src/data/demo-cohort.ts: a cohort of 38 participants, 31 with two or more attempts, 7 excluded, on five measures (confiance en ses capacités au travail, ponctualité et assiduité, compétences techniques du métier, aisance dans la recherche d'emploi, stabilité du logement). One measure stays flat on purpose; a report where everything improves reads as invented. The same numbers and the same French strings are duplicated in scripts/build_marketing_report.py, which generates the PDF image, and the two must be changed together.

frontend/src/data/demo-survey.ts holds the three questions of the interactive intake questionnaire.

Copy and localization

Nothing is hardcoded: every string is a marketing.* key in frontend/lang/{en,fr,es}.json, and a key missing from one catalog fails CI. The French is authored first and the English follows it, which is the reverse of the rest of the platform and is deliberate: this page's first reader works in French.

The static tags in frontend/index.html (title, description, Open Graph, Twitter, canonical) carry the French version for crawlers and link previews, since the SPA has no server render. DocumentHead updates them for the active locale once React mounts, and LanguageProvider keeps <html lang> in step.

Brand assets

  • frontend/src/components/marketing/BrandMark.tsx, the mark in SVG: three measurements rising, joined by the line between them.
  • frontend/public/icon.svg (favicon), apple-touch-icon.png (180x180), og-image.png (1200x630), all regenerated by scripts/build_brand_assets.py from the same mark.

Verification

  • cd frontend && npm run lint && npx tsc --noEmit && npm run test && npm run build
  • Component tests: MarketingNav.test.tsx and HomeSections.test.tsx cover the hero's promise and both calls to action, the four parcours points, the excluded respondents, the flat measure, and the absence of a compliance claim.
  • Headless Chromium screenshots of the whole page in French and English at 390 and 1440 wide, checked for horizontal overflow at 390 (the document width must equal the viewport width).

Open questions

  1. Which call to action leads, the 30 minute conversation or the free trial? The hero currently leads with the conversation; the final band is unbuilt pending this answer.
  2. Does every visitor get French by default, or only a French browser? Today a French browser lands in French and everyone else lands in English, with the picker in the nav and the choice remembered.
  3. Is a pricing line allowed, and in what words? The trust section currently makes no price claim, because billing is not built.