[codex] Fix hero Capacitor label translation text

[riderx]

Summary

• Move the visible <CapacitorJS app/> hero label into CSS generated content so the translation worker no longer treats the escaped angle-bracket text as translatable page copy.
• Keep an sr-only plain-text fallback for accessibility without the problematic angle brackets.

Validation

• bunx prettier --write apps/web/src/components/Hero.astro
• cd apps/web && bun run check

Summary by CodeRabbit

• Style
  • Updated the Hero component's headline rendering to use CSS-based styling while maintaining the same visual appearance and accessibility standards.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9f55268f-c832-4a1b-b593-223c9ddf3583

📥 Commits

Reviewing files that changed from the base of the PR and between 2570ef2 and de635f7.

📒 Files selected for processing (1)

• apps/web/src/components/Hero.astro

---

📝 Walkthrough

Walkthrough

The Hero component's decorative <CapacitorJS app/> text has been refactored from inline HTML markup to CSS-generated content via a pseudo-element, with an explicit screen-reader label added for accessibility.

Changes

Hero Component Styling Refactor

Layer / File(s)	Summary
Markup Structure apps/web/src/components/Hero.astro (lines 183–188)	Replaced inline <span class="text-azure-500"> with an empty decorative span (hero-capacitor-target, aria-hidden="true") and added a separate <span class="sr-only">CapacitorJS app</span> for screen readers.
CSS Styling apps/web/src/components/Hero.astro (lines 360–365)	Added .hero-capacitor-target::before { content: '<CapacitorJS app/>'; } to render the decorative text via CSS pseudo-element.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Poem

A span grew light, no text in sight,
CSS whispers, rendering bright.
::before dances with azure glow,
While sr-only lets readers know. 🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: fixing the hero Capacitor label to address translation issues by moving it from HTML to CSS.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/fix-capacitorjs-hero-text

---

_{Review rate limit: 4/5 reviews remaining, refill in 12 minutes.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.