feat: translate themes

Author: the-pesar

src/ecosystem/themes/ThemeHero.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ThemeHero">
-    <div class="container">
+    <div class="container" dir="rtl">
       <h1 class="title">
         <slot name="title" />
       </h1>

src/ecosystem/themes/ThemeListItem.vue

@@ -19,20 +19,26 @@ const description = computed(() => {
 
 <template>
   <section class="ThemeListItem">
-    <h2 class="title">{{ provider.name }}</h2>
-    <p class="description" v-html="description" />
+    <div dir="rtl">
+      <h2 class="title">{{ provider.name }}</h2>
+      <p class="description" v-html="description" />
+    </div>
 
     <div class="container">
       <div class="products">
-        <div v-for="product in provider.products" :key="product.name" class="product">
+        <div
+          v-for="product in provider.products"
+          :key="product.name"
+          class="product"
+        >
           <ThemeProduct :product="product" />
         </div>
       </div>
     </div>
 
     <div class="action">
       <VTLink class="action-link" :href="provider.seeMoreUrl" no-icon>
-        See More Themes from {{ provider.name }}
+        {{ provider.name }} نمایش تم‌های بیشتر از
       </VTLink>
     </div>
   </section>

src/ecosystem/themes/ThemePage.vue

@@ -7,14 +7,23 @@ import ThemeContact from './ThemeContact.vue'
 <template>
   <div class="ThemePage">
     <ThemeHero>
-      <template #title>Themes</template>
-      <template #lead>Check out the themes, UI Kits, and plugins. You can see how a real-world application is built with Vue by our partners.</template>
+      <template #title>تم‌ها</template>
+      <template #lead
+        >می‌توانید با بررسی تم‌ها، کیت‌های رابط کاربری و افزونه‌های ساخته
+        شده توسط شرکای ما، نحوه ساخت یک اپلیکیشن واقعی با Vue را مشاهده
+        کنید.</template
+      >
     </ThemeHero>
 
     <ThemeList />
 
     <ThemeContact>
-      Want to feature your themes here? <a class="link" href="mailto:[email protected]?subject=Theme+affiliation">Contact us!</a>
+      آیا می‌خواهید تم‌های خود را در اینجا نمایش دهید؟
+      <a
+        class="link"
+        href="mailto:[email protected]?subject=Theme+affiliation"
+        >با ما ارتباط بگیرید!</a
+      >
     </ThemeContact>
   </div>
 </template>

src/ecosystem/themes/ThemeProduct.vue

@@ -10,18 +10,20 @@ const props = defineProps<{
   <VTLink class="ThemeProduct" :href="product.url" no-icon>
     <article class="container">
       <figure class="figure">
-        <img class="image" :src="product.image" :alt="product.name">
+        <img class="image" :src="product.image" :alt="product.name" />
       </figure>
 
       <div class="data">
         <div class="title">
-          <h1 class="name">{{ product.name }}</h1>
+          <h1 class="name" dir="ltr">{{ product.name }}</h1>
           <p class="description">{{ product.description }}</p>
         </div>
 
         <div class="price">
-          <p v-if="product.price > 0" class="value">${{ product.price }}</p>
-          <p v-else class="free">FREE</p>
+          <p v-if="product.price > 0" class="value">
+            ${{ product.price }}
+          </p>
+          <p v-else class="free">رایگان</p>
         </div>
       </div>
     </article>
@@ -62,6 +64,7 @@ const props = defineProps<{
   font-size: 16px;
   font-weight: 500;
   transition: color 0.25s;
+  direction: ltr;
 }
 
 .description {
@@ -71,6 +74,7 @@ const props = defineProps<{
   font-weight: 500;
   color: var(--vt-c-text-2);
   transition: color 0.25s;
+  direction: ltr;
 }
 
 .price {

src/ecosystem/themes/themes.json

@@ -1,7 +1,7 @@
 [
   {
     "name": "Creative Tim",
-    "description": "With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real-world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real-world application.",
+    "description": "با نمونه‌های ساخته شده توسط شرکای ما از [Creative Tim](https://creative-tim.com?affiliate_id=116187)، می‌توانید نحوه ساخت یک اپلیکیشن واقعی، فناوری‌های پشت سر آن و چگونگی اعمال بسیاری از مفاهیمی که تاکنون آموخته‌اید را در یک اپلیکیشن واقعی مشاهده کنید.",
     "seeMoreUrl": "https://www.creative-tim.com/bootstrap-themes/vuejs-themes?affiliate_id=116187",
     "products": [
       {
@@ -92,7 +92,7 @@
   },
   {
     "name": "MDBootstrap",
-    "description": "Check out the themes, UI Kits and plugins below built by our partners from [MDBootstrap](https://mdbootstrap.com/?utm_ref_id=82665). Learn how to use Vue in professional projects along such technologies as Bootstrap. Templates & ready components make your development faster and more efficient.",
+    "description": "تم‌ها، کیت‌های رابط کاربری و پلاگین‌های ساخته شده توسط شرکای ما از [MDBootstrap](https://mdbootstrap.com/?utm_ref_id=82665) را بررسی کنید. بیاموزید که چگونه از Vue در پروژه‌های حرفه‌ای همراه با فناوری‌هایی مثل Bootstrap استفاده کنید. قالب‌ها و کامپوننت‌های آماده، توسعه شما را سریع‌تر و موثرتر می‌کنند.",
     "seeMoreUrl": "https://mdbootstrap.com/docs/vue/?utm_ref_id=82665",
     "products": [
       {
@@ -274,7 +274,7 @@
   },
   {
     "name": "PrimeVue",
-    "description": "The open-source UI component library [PrimeVue](https://www.primefaces.org/primevue/?af_id=4218) offers over 90 flexible components to build your apps with! They have a ton of different component themes and application templates available to get the look & feel that suits you best.",
+    "description": "کتابخانه رابط کاربری متن‌باز [PrimeVue](https://www.primefaces.org/primevue/?af_id=4218) بیش از 90 کامپوننت انعطاف‌پذیر برای ساخت برنامه‌های شما ارائه می‌دهد! آنها مجموعه‌ای عظیم از تم‌های کامپوننت و قالب‌های اپلیکیشن برای ایجاد ظاهر و احساس مناسب شما دارند.",
     "seeMoreUrl": "https://www.primefaces.org/primevue/?af_id=4218",
     "products": [
       {
@@ -379,7 +379,7 @@
   },
   {
     "name": "Flatlogic",
-    "description": "Check out the admin dashboard templates built by our partners from [Flatlogic](https://flatlogic.com/templates?ref=x-fdkuTAVW). With these themes you can see how real applications are built. Additionally, these templates will help you to start a new application and save you time and money.",
+    "description": "قالب‌های داشبورد مدیریت ساخته شده توسط شرکای ما از [Flatlogic](https://flatlogic.com/templates?ref=x-fdkuTAVW) را بررسی کنید. با استفاده از این تم‌ها می‌توانید ببینید که اپلیکیشن‌های واقعی چگونه ساخته می‌شوند. علاوه بر این، این قالب‌ها به شما کمک می‌کنند تا یک اپلیکیشن جدید را شروع کرده و در زمان و هزینه خود صرفه‌جویی کنید.",
     "seeMoreUrl": "https://flatlogic.com/templates?ref=x-fdkuTAVW",
     "products": [
       {