Improve landing page conversion copy#598
Conversation
📝 WalkthroughWalkthroughReordered Tailwind utility classes in the HowItWorks component, added aria attributes to SVGs, inserted a testimonial block, and updated English marketing copy; several non-English locale files receive punctuation fixes to a testimonial string. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Review rate limit: 0/5 reviews remaining, refill in 54 minutes and 11 seconds. Comment |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
apps/web/src/components/HowItWorks.astro (1)
391-394: ⚡ Quick winAvoid
set:htmlfor plain localized copy.
testimonial_titleis plain text in the current locale file, soset:htmlonly drops Astro's escaping guarantees here. Render it normally unless this key is intentionally trusted rich text.Suggested change
- <p - class="relative text-lg leading-8 font-semibold text-white before:absolute before:inline before:-translate-x-full before:content-['\201C'] after:inline after:content-['\201D']" - set:html={m.testimonial_title({}, { locale: Astro.locals.locale })} - /> + <p class="relative text-lg leading-8 font-semibold text-white before:absolute before:inline before:-translate-x-full before:content-['\201C'] after:inline after:content-['\201D']"> + {m.testimonial_title({}, { locale: Astro.locals.locale })} + </p>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/components/HowItWorks.astro` around lines 391 - 394, The element in HowItWorks.astro uses set:html with m.testimonial_title(...), which exposes raw HTML escaping for a plain localized string; replace the set:html usage with normal rendering (put the result of m.testimonial_title({}, { locale: Astro.locals.locale }) as the element's child or interpolate it) so Astro's automatic escaping is preserved, and only use set:html if the key intentionally contains trusted rich HTML.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/src/components/HowItWorks.astro`:
- Around line 396-397: The template is appending a hard-coded period after the
translated string call m.testimonial_highlight, which forces English
punctuation; remove the trailing "." from the JSX/HTML so the template simply
renders {m.testimonial_highlight({}, { locale: Astro.locals.locale })} and
update the corresponding locale entries for testimonial_highlight to include
their own punctuation in each language. Ensure no other place appends extra
punctuation around m.testimonial_highlight so translators control the final
sentence punctuation.
- Around line 24-25: The decorative <svg> elements (e.g., the SVG inside the div
with classes "relative top-30 left-8 mb-8 flex h-64 items-center justify-center"
and the other decorative SVGs in this HowItWorks component) are exposed to
assistive tech; update each such <svg> to include aria-hidden="true" and
focusable="false" so screen readers skip them, and apply the same attributes to
the other decorative SVG instances in this section.
In `@messages/en.json`:
- Line 1103: Update the localization key "how_it_works_card3_title" in
messages/en.json to clarify that the update is automatic; replace the current
value "Users switch on next launch" with a clearer phrase such as "Update
applies on next launch" so the title matches the actual updater behavior
described elsewhere.
- Line 1630: Update the JSON value for the "problem_solution_title" key to fix
grammar and readability: replace "App store reviews slow" with "Slow App Store
reviews" (preserve surrounding quotes and JSON formatting for the
"problem_solution_title" entry).
---
Nitpick comments:
In `@apps/web/src/components/HowItWorks.astro`:
- Around line 391-394: The element in HowItWorks.astro uses set:html with
m.testimonial_title(...), which exposes raw HTML escaping for a plain localized
string; replace the set:html usage with normal rendering (put the result of
m.testimonial_title({}, { locale: Astro.locals.locale }) as the element's child
or interpolate it) so Astro's automatic escaping is preserved, and only use
set:html if the key intentionally contains trusted rich HTML.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: e523413e-44f8-43a3-aaff-f6c860acef1d
📒 Files selected for processing (2)
apps/web/src/components/HowItWorks.astromessages/en.json
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@messages/en.json`:
- Line 1728: Update the JSON value for the key "reach_users_now_not_weeks_later"
to avoid implying immediate in-session updates and reflect the "apply on next
launch" flow: reword the message so it says users will receive or see the web
fix on their next app launch (and optionally note that this typically happens
within minutes), ensuring the copy aligns with the update lifecycle described
elsewhere in the PR.
- Line 1630: Update the localization key "problem_solution_title" in
messages/en.json to use the correct product-name capitalization by changing its
value from "App store review delays" to "App Store review delays" so the
headline reads with a capital "S" for "Store".
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: f71a51a9-4cb0-4dfc-bd19-d2d7985a9c3f
📒 Files selected for processing (9)
apps/web/src/components/HowItWorks.astromessages/en.jsonmessages/es.jsonmessages/fr.jsonmessages/id.jsonmessages/it.jsonmessages/ja.jsonmessages/ko.jsonmessages/zh.json
✅ Files skipped from review due to trivial changes (7)
- messages/it.json
- messages/ko.json
- messages/fr.json
- messages/zh.json
- messages/es.json
- messages/id.json
- messages/ja.json
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/src/components/HowItWorks.astro
|
There was a problem hiding this comment.
♻️ Duplicate comments (1)
messages/en.json (1)
1128-1130:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winClarify when the update actually applies.
This still reads as if the fix is applied “in the background,” which conflicts with the next-launch flow used elsewhere in the PR. Make the download/apply split explicit so the copy stays consistent.
✏️ Suggested copy tweak
- "instant_updates_for_capacitor_apps_description": "When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.", + "instant_updates_for_capacitor_apps_description": "When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users download the update in the background and it applies on their next launch while native changes stay in the normal review path.",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@messages/en.json` around lines 1128 - 1130, Update the copy for the keys "instant_updates_for_capacitor_apps_description" and (if relevant) "instant_updates_for_your" to explicitly state the download vs apply behavior: say the fix is downloaded in the background but applied on next app launch (or similar "next-launch" wording) so it matches the PR's next-launch flow and removes the implication that fixes are applied immediately in the background.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@messages/en.json`:
- Around line 1128-1130: Update the copy for the keys
"instant_updates_for_capacitor_apps_description" and (if relevant)
"instant_updates_for_your" to explicitly state the download vs apply behavior:
say the fix is downloaded in the background but applied on next app launch (or
similar "next-launch" wording) so it matches the PR's next-launch flow and
removes the implication that fixes are applied immediately in the background.



Summary
Checks
Summary by CodeRabbit
New Features
Style
Chores