feat(i18n): homepage selector, readme localization update

README.md

@@ -14,7 +14,30 @@
 - Advanced Optimization Tools like ROI & Profit Calculator: Detailed calculations for production costs and profit per area.
 - Efficient Material I/O: Visual and data-based analysis of production vs. consumption to identify bottlenecks and resource gaps.
 
+
+# Localization & Community Translations
+
+Driven by the incredible efforts of the PRUNplanner community, our planning tools and features are accessible globally. The platform natively supports multiple languages, with more on the horizon:
+
+**🇺🇸 English** (Native) | **🇩🇪 Deutsch** | **🇷🇺 Русский** | **🇨🇳 简体中文**
+
+Want to see PRUNplanner in your language or help refine existing strings?
+
+[![Crowdin](https://badges.crowdin.net/prunplanner/localized.svg)](https://crowdin.com/project/prunplanner)
+
+👉 **[Join our translation project on Crowdin](https://crowdin.com/project/prunplanner)**
+
+A huge thank you to the following community members who volunteered their time to translate and maintain PRUNplanner translations:
+
+| Language | Core Contributors |
+| :--- | :--- |
+| **🇩🇪 Deutsch** | `Eisberi` |
+| **🇷🇺 Русский** | `hameronlive`, `Razenpok` |
+| **🇨🇳 简体中文** | `YuLun-bili`, `PHANTOMSPACE`, `MioandMeow` |
+
+
 # Development
+
 ## Stack
 
 - [Vue3](https://vuejs.org/)

src/layout/components/HomepageLanguage.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+	import { usePreferences } from "@/features/preferences/usePreferences";
+	const { locale } = usePreferences();
+	import { SupportedLanguages } from "@/lib/i18n";
+
+	// UI
+	import PSelect from "@/ui/components/PSelect.vue";
+</script>
+
+<template>
+	<div
+		class="border border-dashed border-prunplanner/50 py-3 px-2 flex flex-row items-center gap-6 divide-x divide-prunplanner/50 divide-dashed">
+		<div class="flex-grow px-3">
+			Thanks to the incredible efforts of the PRUNplanner community, our
+			planning tools and features are accessible globally. The platform
+			natively supports
+			<strong>
+				{{ SupportedLanguages.map((e) => e.label).join(", ") }} </strong
+			>. Want to see PRUNplanner in your language? Join our translation
+			project on
+			<a
+				href="https://crowdin.com/project/prunplanner"
+				target="_blank"
+				class="underline hover:text-prunplanner">
+				Crowdin</a
+			>!
+		</div>
+		<div class="text-end">
+			<PSelect v-model:value="locale" :options="SupportedLanguages" />
+		</div>
+	</div>
+</template>

src/lib/i18n/index.ts

@@ -49,14 +49,14 @@ export const SupportedLanguages: PSelectOption[] = [
 	// 	label: "Español",
 	// 	value: "es_ES",
 	// },
-	{
-		label: "Français",
-		value: "fr_FR",
-	},
-	{
-		label: "Italiano",
-		value: "it_IT",
-	},
+	// {
+	// 	label: "Français",
+	// 	value: "fr_FR",
+	// },
+	// {
+	// 	label: "Italiano",
+	// 	value: "it_IT",
+	// },
 	// {
 	// 	label: "日本",
 	// 	value: "ja_JP",
@@ -65,10 +65,10 @@ export const SupportedLanguages: PSelectOption[] = [
 	// 	label: "한국어",
 	// 	value: "ko_KR",
 	// },
-	{
-		label: "Nederlands",
-		value: "nl_NL",
-	},
+	// {
+	// 	label: "Nederlands",
+	// 	value: "nl_NL",
+	// },
 	// {
 	// 	label: "Português",
 	// 	value: "pt_PT",

src/views/HomepageView.vue

@@ -1,4 +1,9 @@
 <script setup lang="ts">
+	import { computed } from "vue";
+
+	// Components
+	import HomepageLanguage from "@/layout/components/HomepageLanguage.vue";
+
 	const screenshots: { image: string; text: string }[] = [
 		{
 			image: "/images/homepage/homepage-empire.png",
@@ -25,6 +30,12 @@
 			text: "homepage.images.planet_search",
 		},
 	];
+
+	// check, if user language is not English
+	const showLanguageSelector = computed<boolean>(() => {
+		if (typeof window === "undefined") return true;
+		return !!navigator.language.startsWith("en");
+	});
 </script>
 
 <template>
@@ -43,10 +54,16 @@
 		<h1 class="pb-4 text-4xl tracking-tight text-white text-center mt-30">
 			{{ $t("homepage.features.section_title") }}
 		</h1>
-		<p class="text-white/60 text-center text-xl mb-10">
+		<p
+			class="text-white/60 text-center text-xl"
+			:class="showLanguageSelector ? 'mb-' : 'mb-10'">
 			{{ $t("homepage.features.section_lead") }}
 		</p>
 
+		<div v-if="showLanguageSelector" class="p-10">
+			<HomepageLanguage />
+		</div>
+
 		<div
 			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 bg-white/20 gap-px child:p-10 child:hover:bg-linear-315 child:from-white/10 child:to-transparent mb-20">
 			<div class="bg-black">