feat: localize text in various components and pages

- Updated Footer.astro to use localized messages for button labels and copyright notice.
- Modified FrameworkSelector.astro to utilize localized keys for framework names.
- Enhanced Header.astro with localized aria-labels and link texts.
- Updated CopyPage.astro to incorporate localized messages for button labels and subtitles.
- Adjusted LanguageSelect.astro to display the language label using localization.
- Improved 404.astro to show localized title and description for the error page.
- Updated sponsor.astro to use localized titles and descriptions for sponsors.
- Added localization to various text elements across components for better internationalization support.

Author: riderx

messages/en.json

@@ -3655,5 +3655,190 @@
   "storage_what_is_it_used_for": "What is storage used for and how does it work?",
   "storage_detailed_explanation": "Storage is used to store your app update bundles, which contain web assets (HTML, CSS, JavaScript), version metadata, and checksums. It keeps all uploaded versions to support instant rollbacks, multiple release channels (production, beta, staging), and deployment history. Storage usage grows with each OTA update since every update is stored as a full bundle. Typical usage is 2 GB for a few apps with limited history, and 10–20 GB for multiple apps with frequent releases.",
   "can_i_use_soc2_with_other_plans": "Can I use SOC 2 compliance with Solo, Maker, or Team plans?",
-  "soc2_enterprise_only": "For now, it's only available on the Enterprise plan."
+  "soc2_enterprise_only": "For now, it's only available on the Enterprise plan.",
+
+  "page_not_found": "Page Not Found",
+  "error_404": "Error 404",
+  "page_not_found_title": "Page Not Found - Error 404",
+  "page_not_found_description": "Please check the URL in the address bar and try again.",
+  "go_back_home": "Go back home",
+  "contact_support": "Contact support",
+
+  "sponsor_title": "Capgo Sponsors",
+  "sponsor_description": "Capgo is an open-source framework free to use thanks to our generous sponsors. If you use Capgo in your daily work and can't use our cloud service, please consider backing us.",
+  "become_a_sponsor": "Become a sponsor",
+  "tier_platinum": "Platinum",
+  "tier_gold": "Gold",
+  "tier_silver": "Silver",
+  "tier_baker": "Baker",
+
+  "copy_page": "Copy page",
+  "copy_page_options": "Copy page options",
+  "copy_page_as_markdown": "Copy page as Markdown for LLMs",
+  "view_as_markdown": "View as Markdown",
+  "view_page_as_plain_text": "View this page as plain text",
+  "open_in_chatgpt": "Open in ChatGPT",
+  "open_in_claude": "Open in Claude",
+  "open_in_perplexity": "Open in Perplexity",
+  "ask_questions_about_page": "Ask questions about this page",
+  "copied": "Copied!",
+  "failed_to_copy": "Failed to copy",
+
+  "capgo_home": "Capgo home",
+  "expand_menu": "Expand menu",
+  "github_stars": "GitHub Stars",
+
+  "install_plugin": "Install Plugin",
+  "compare": "Compare",
+  "all_systems_normal_uptime": "All systems normal: 99% uptime",
+  "copyright_notice": "CAPGO, Digital shift OU. ALL RIGHTS RESERVED.",
+  "soc2_compliant": "SOC 2 Compliant",
+  "soc1_compliant": "SOC 1 Compliant",
+  "gdpr_compliant": "GDPR Compliant",
+
+  "semver_tester_title": "Capgo Semver Tester",
+  "semver_tester_description": "Check semantic versioning compatibility for your Capacitor app updates",
+  "local_version": "Local Version",
+  "remote_version": "Remote Version",
+  "advanced_settings": "Advanced Settings",
+  "app_context": "App Context",
+  "platform": "Platform",
+  "development_build": "Development Build",
+  "running_on_emulator": "Running on Emulator",
+  "channel_settings": "Channel Settings",
+  "allow_updates_for_ios": "Allow updates for iOS devices",
+  "allow_updates_for_android": "Allow updates for Android devices",
+  "allow_development_build": "Allow development build",
+  "allow_updates_for_dev_builds": "Allow updates for development builds",
+  "allow_emulators": "Allow Emulators",
+  "allow_updates_for_emulators": "Allow updates for emulator devices",
+  "disable_auto_downgrade": "Disable auto downgrade under native",
+  "prevents_downgrade_native": "Prevents downgrading when running native code",
+  "disable_auto_update": "Disable auto update",
+  "controls_version_updates": "Controls which version updates are allowed",
+  "metadata_value": "Metadata Value",
+  "minimum_version_requirement": "Minimum version requirement for local app",
+  "enter_versions_to_compare": "Enter two semantic versions to see comparison",
+  "strategy_major": "Major",
+  "strategy_minor": "Minor",
+  "strategy_patch": "Patch",
+  "strategy_metadata": "Metadata",
+  "strategy_none": "None",
+  "why_capgo_uses_semver": "Why Capgo uses Semantic Versioning",
+  "semver_description": "Semantic Versioning is the most widely adopted versioning standard in software development. By using semver, Capgo ensures compatibility and safety when delivering live updates to your Capacitor apps.",
+  "semver_understand_changes": "The semver standard allows Capgo to understand exactly what changes are included in each update:",
+  "patch_updates_desc": "Patch updates (1.0.0 → 1.0.1): Bug fixes, safe to apply automatically",
+  "minor_updates_desc": "Minor updates (1.0.0 → 1.1.0): New features, backward compatible",
+  "major_updates_desc": "Major updates (1.0.0 → 2.0.0): Breaking changes, require native app store release",
+  "semver_protection": "This prevents Capgo from ever sending an incompatible update to your native code, protecting your users from crashes and ensuring your app remains stable.",
+  "flexible_semver_strategies": "Flexible Semver Strategies: Beyond Basic Versioning",
+  "flexible_semver_intro": "While semver is strict about its core format, you can extend it for your team's needs using pre-release identifiers and build metadata:",
+  "build_metadata_title": "Build Metadata (+) - The \"Cosmetic\" Layer",
+  "timestamp_for_tracking": "Timestamp for deployment tracking",
+  "ui_update_description": "UI update description for design team",
+  "ci_cd_build_commit": "CI/CD build number and git commit",
+  "build_metadata_note": "Important: Build metadata is ignored in version precedence - 1.2.0+anything equals 1.2.0 for Capgo's update logic.",
+  "prerelease_title": "Pre-release Identifiers (-) - Development Channels",
+  "beta_testing_channel": "Beta testing channel",
+  "urgent_fix_branch": "Urgent fix branch",
+  "feature_branch_testing": "Feature branch testing",
+  "prerelease_note": "Note: Pre-release versions have lower precedence - 1.3.0-beta.1 < 1.3.0",
+  "hybrid_approach_title": "Hybrid Approach - Best of Both Worlds",
+  "release_candidate_metadata": "Release candidate with UI metadata and timestamp",
+  "real_world_use_cases": "Real-World Semver Use Cases & Team Strategies",
+  "startup_fast_dev": "Startup / Fast Development",
+  "first_mvp_release": "First MVP release",
+  "new_feature_testing": "New feature testing",
+  "ui_redesign_metadata": "UI redesign metadata",
+  "production_ready": "Production ready",
+  "startup_tip": "Use 0.x.x for pre-1.0 development, metadata for design tracking",
+  "enterprise_regulated": "Enterprise / Regulated",
+  "quarterly_release": "Quarterly release",
+  "security_patch_tracking": "Security patch with tracking",
+  "pre_audit_release": "Pre-audit release candidate",
+  "enterprise_tip": "Strict semver with compliance metadata",
+  "gaming_creative": "Gaming / Creative Apps",
+  "seasonal_content": "Seasonal content",
+  "event_driven_features": "Event-driven features",
+  "asset_updates": "Asset updates",
+  "gaming_tip": "Creative metadata for content tracking",
+  "hotfix_strategy": "Hotfix Strategy",
+  "current_production": "Current production",
+  "critical_bug_fix": "Critical bug fix",
+  "released_with_timestamp": "Released with timestamp",
+  "hotfix_tip": "Pre-release for testing, metadata for deployment tracking",
+  "multi_platform_strategy": "Multi-Platform Strategy",
+  "ios_optimizations": "iOS-specific optimizations",
+  "android_design_updates": "Android design updates",
+  "pwa_capabilities": "PWA capabilities",
+  "multi_platform_tip": "Same version, platform-specific metadata",
+  "ci_cd_integration_title": "CI/CD Integration",
+  "automated_prerelease": "Automated pre-release",
+  "staging_deployment": "Staging deployment",
+  "production_deployment": "Production deployment",
+  "ci_cd_tip": "Automated versioning with deployment metadata",
+  "pro_tips": "Pro Tips:",
+  "pro_tip_1": "Use build metadata (+) for tracking, timestamps, or cosmetic info that doesn't affect compatibility",
+  "pro_tip_2": "Use pre-release identifiers (-) for development channels that need different update precedence",
+  "pro_tip_3": "Combine both for maximum flexibility: 1.2.0-beta.1+ui.dark.theme.20240315",
+  "pro_tip_4": "Remember: Capgo respects semver precedence rules, so plan your channel strategy accordingly",
+  "important_strict_semver": "Important: Capgo uses strict semantic versioning",
+  "strict_semver_note": "Unlike npm's semver implementation, Capgo follows the official SemVer specification strictly. npm's node-semver has known deviations from the spec, which can cause unexpected behavior.",
+  "npm_deviation_example": "For example, npm treats versions like 1.0.0-alpha.1 differently than the specification requires.",
+  "see_reported_issue": "See our reported issue",
+  "and_attempted_fix": "and attempted fix",
+  "that_was_never_merged": "that was never merged.",
+  "valid_semver": "Valid Semantic Versions",
+  "invalid_semver": "Invalid Semantic Versions",
+  "standard_release": "Standard release",
+  "pre_release": "Pre-release",
+  "pre_release_with_number": "Pre-release with number",
+  "build_metadata": "Build metadata",
+  "complete_version": "Complete version",
+  "leading_v_not_allowed": "Leading 'v' not allowed",
+  "missing_patch_version": "Missing patch version",
+  "too_many_parts": "Too many version parts",
+  "empty_prerelease": "Empty pre-release",
+  "empty_build_metadata": "Empty build metadata",
+  "capgo_update_behavior": "Capgo Update Behavior",
+  "patch_auto_applied": "Patch updates are automatically applied (1.0.0 → 1.0.1)",
+  "minor_requires_config": "Minor updates require channel configuration (1.0.0 → 1.1.0)",
+  "major_requires_store": "Major updates require native app store release (1.0.0 → 2.0.0)",
+  "prerelease_requires_config": "Pre-release versions require explicit configuration",
+  "semver_footer_note": "This tool follows the official Semantic Versioning specification unlike npm's implementation.",
+
+  "questionnaire_framework_question": "What language/framework do you primarily use in your app?",
+  "questionnaire_script_location": "Where do you put your script in the HTML document?",
+  "questionnaire_in_head": "In the <head> section",
+  "questionnaire_end_of_body": "At the end of <body> (before closing tag)",
+  "questionnaire_react_framework": "What React framework/setup are you using?",
+  "questionnaire_angular_framework": "What Angular framework/setup are you using?",
+  "questionnaire_vue_framework": "What Vue framework/setup are you using?",
+  "questionnaire_svelte_framework": "What Svelte framework/setup are you using?",
+  "questionnaire_qwik_framework": "What Qwik framework/setup are you using?",
+  "questionnaire_place_notify": "Place the notifyAppReady() call",
+  "questionnaire_script_type": "How does your <script> tag look?",
+  "questionnaire_caution": "Caution",
+  "questionnaire_must_call_first": "You MUST put CapacitorUpdater.notifyAppReady(); before running any other code",
+  "questionnaire_ionic": "Ionic",
+  "questionnaire_nextjs": "Next.js",
+  "questionnaire_vite_react": "Vite + React SPA",
+  "questionnaire_react_router": "React Router",
+  "questionnaire_create_react_app": "Legacy Create React App",
+  "questionnaire_vite_angular": "Vite + Angular SPA",
+  "questionnaire_angular_cli": "Angular CLI (ng)",
+  "questionnaire_vite_vue": "Vite + Vue SPA",
+  "questionnaire_nuxt": "Nuxt",
+  "questionnaire_vite_svelte": "Vite + Svelte SPA",
+  "questionnaire_sveltekit": "SvelteKit",
+  "questionnaire_vite_qwik": "Vite + Qwik SPA",
+  "questionnaire_qwik_city": "Qwik City",
+  "framework_js_dom": "JS + DOM API",
+  "framework_ts_dom": "TS + DOM API",
+  "framework_react": "React",
+  "framework_angular": "Angular",
+  "framework_vue": "Vue",
+  "framework_svelte": "Svelte",
+  "framework_qwik": "Qwik",
+  "language_label": "Language"
 }

src/components/Footer.astro

@@ -158,7 +158,7 @@ const navigation: Record<string, NavigationItem[]> = {
         <span class="block text-zinc-500">{m.footer_tagline_part2({}, { locale: Astro.locals.locale })}</span>
       </h2>
       <a href={getRelativeLocaleUrl(Astro.locals.locale, 'plugins')} class="inline-flex justify-center items-center py-3 px-6 text-base font-medium text-white bg-blue-600 rounded-md border border-transparent shadow-sm hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none">
-        Install Plugin
+        {m.install_plugin({}, { locale: Astro.locals.locale })}
       </a>
     </div>
 
@@ -226,7 +226,7 @@ const navigation: Record<string, NavigationItem[]> = {
         </ul>
       </div>
       <div>
-        <h3 class="mb-4 text-sm font-semibold tracking-wider text-white uppercase">Compare</h3>
+        <h3 class="mb-4 text-sm font-semibold tracking-wider text-white uppercase">{m.compare({}, { locale: Astro.locals.locale })}</h3>
         <ul role="list" class="space-y-3">
           {navigation.compare.map((item) => (
             <li>
@@ -261,12 +261,12 @@ const navigation: Record<string, NavigationItem[]> = {
                   <span class="inline-flex absolute w-full h-full bg-green-400 rounded-full opacity-75 animate-ping"></span>
                   <span class="inline-flex relative w-2 h-2 bg-green-500 rounded-full"></span>
                 </span>
-                All systems normal: 99% uptime
+                {m.all_systems_normal_uptime({}, { locale: Astro.locals.locale })}
              </a>
              <div class="flex gap-4">
-               <img src="/soc2.svg" alt="SOC 2 Compliant" class="w-auto h-12 opacity-80 transition-opacity hover:opacity-100" />
-               <img src="/soc1.svg" alt="SOC 1 Compliant" class="w-auto h-12 opacity-80 transition-opacity hover:opacity-100" />
-               <img src="/gdpr.svg" alt="GDPR Compliant" class="w-auto h-12 opacity-80 transition-opacity hover:opacity-100" />
+               <img src="/soc2.svg" alt={m.soc2_compliant({}, { locale: Astro.locals.locale })} class="w-auto h-12 opacity-80 transition-opacity hover:opacity-100" />
+               <img src="/soc1.svg" alt={m.soc1_compliant({}, { locale: Astro.locals.locale })} class="w-auto h-12 opacity-80 transition-opacity hover:opacity-100" />
+               <img src="/gdpr.svg" alt={m.gdpr_compliant({}, { locale: Astro.locals.locale })} class="w-auto h-12 opacity-80 transition-opacity hover:opacity-100" />
              </div>
              <p class="max-w-md text-xs text-zinc-500">
                 {m.enterprise_security_audit_desc({}, { locale: Astro.locals.locale })}
@@ -293,7 +293,7 @@ const navigation: Record<string, NavigationItem[]> = {
             </div>
 
             <p class="text-xs tracking-wider uppercase text-zinc-500">
-                &copy; {year} CAPGO, Digital shift OU. ALL RIGHTS RESERVED.
+                &copy; {year} {m.copyright_notice({}, { locale: Astro.locals.locale })}
             </p>
         </div>
     </div>

src/components/FrameworkSelector.astro

@@ -1,32 +1,50 @@
 ---
 // FrameworkSelector.astro - Framework selection buttons for conditional steps
+import * as m from '@/paraglide/messages'
+
 interface FrameworkOption {
   id: string
-  name: string
+  nameKey: string
   icon: string
 }
 
 const frameworks: FrameworkOption[] = [
-  { id: 'js', name: 'JS + DOM API', icon: '/icons/js.svg' },
-  { id: 'ts', name: 'TS + DOM API', icon: '/icons/ts.svg' },
-  { id: 'react', name: 'React', icon: '/icons/react.svg' },
-  { id: 'angular', name: 'Angular', icon: '/icons/angular.svg' },
-  { id: 'vue', name: 'Vue', icon: '/icons/vue.svg' },
-  { id: 'svelte', name: 'Svelte', icon: '/icons/svelte.svg' },
-  { id: 'qwik', name: 'Qwik', icon: '/icons/qwik.svg' },
+  { id: 'js', nameKey: 'framework_js_dom', icon: '/icons/js.svg' },
+  { id: 'ts', nameKey: 'framework_ts_dom', icon: '/icons/ts.svg' },
+  { id: 'react', nameKey: 'framework_react', icon: '/icons/react.svg' },
+  { id: 'angular', nameKey: 'framework_angular', icon: '/icons/angular.svg' },
+  { id: 'vue', nameKey: 'framework_vue', icon: '/icons/vue.svg' },
+  { id: 'svelte', nameKey: 'framework_svelte', icon: '/icons/svelte.svg' },
+  { id: 'qwik', nameKey: 'framework_qwik', icon: '/icons/qwik.svg' },
 ]
+
+const getFrameworkName = (key: string) => {
+  const translations: Record<string, string> = {
+    framework_js_dom: m.framework_js_dom({}, { locale: Astro.locals.locale }),
+    framework_ts_dom: m.framework_ts_dom({}, { locale: Astro.locals.locale }),
+    framework_react: m.framework_react({}, { locale: Astro.locals.locale }),
+    framework_angular: m.framework_angular({}, { locale: Astro.locals.locale }),
+    framework_vue: m.framework_vue({}, { locale: Astro.locals.locale }),
+    framework_svelte: m.framework_svelte({}, { locale: Astro.locals.locale }),
+    framework_qwik: m.framework_qwik({}, { locale: Astro.locals.locale }),
+  }
+  return translations[key] || key
+}
 ---
 
 <div class="framework-selector">
   {
-    frameworks.map((framework) => (
-      <button class="framework-button" data-framework={framework.id} aria-label={`Select ${framework.name}`}>
-        <div class="framework-icon">
-          <img src={framework.icon} alt={framework.name} />
-        </div>
-        <div class="framework-name">{framework.name}</div>
-      </button>
-    ))
+    frameworks.map((framework) => {
+      const name = getFrameworkName(framework.nameKey)
+      return (
+        <button class="framework-button" data-framework={framework.id} aria-label={`Select ${name}`}>
+          <div class="framework-icon">
+            <img src={framework.icon} alt={name} />
+          </div>
+          <div class="framework-name">{name}</div>
+        </button>
+      )
+    })
   }
 </div>