Merge pull request #5 from vuejs-vn/docs/homepage

Author: phanan

.vitepress/config.ts

@@ -611,7 +611,7 @@ export default defineConfigWithTheme<ThemeConfig>({
         text: 'MIT License',
         link: 'https://opensource.org/licenses/MIT'
       },
-      copyright: `Copyright © 2014-${new Date().getFullYear()} Evan You`
+      copyright: `Bản quyền © 2014-${new Date().getFullYear()} Evan You`
     }
   },
 

.vitepress/theme/components/Home.vue

@@ -6,17 +6,16 @@ import SponsorsGroup from './SponsorsGroup.vue';
 <template>
   <section id="hero">
     <h1 class="tagline">
-      The
-      <span class="accent">Progressive</span>
-      <br />JavaScript Framework
+      Framework JavaScript
+      <br />
+      <span class="accent">linh động</span>
     </h1>
-    <p class="description">
-      An approachable, performant and versatile framework for building web
-      user interfaces.
-    </p>
+    <p
+      class="description"
+    >Một framework gần gũi, mạnh mẽ và linh hoạt để xây dựng giao diện người dùng trên nền tảng web.</p>
     <p class="actions">
       <a class="get-started" href="/guide/introduction.html">
-        Get Started
+        Bắt đầu
         <svg
           class="icon"
           xmlns="http://www.w3.org/2000/svg"
@@ -29,55 +28,41 @@ import SponsorsGroup from './SponsorsGroup.vue';
           />
         </svg>
       </a>
-      <a class="setup" href="/guide/quick-start.html">Install</a>
+      <a class="setup" href="/guide/quick-start.html">Cài đặt</a>
     </p>
   </section>
 
   <!-- TODO make dynamic based on data -->
   <section id="special-sponsor">
-    <span>Special Sponsor</span>
+    <span>Tài trợ đặc biệt</span>
     <a href="https://www.dcloud.io/hbuilderx.html?hmsr=vue-en&hmpl=&hmcu=&hmkw=&hmci=">
       <picture>
         <source type="image/avif" srcset="/images/sponsors/hbuilder.avif" />
-        <img
-          alt="hbuilder logo"
-          width="97"
-          height="36"
-          src="/images/sponsors/hbuilder.png"
-        />
+        <img alt="hbuilder logo" width="97" height="36" src="/images/sponsors/hbuilder.png" />
       </picture>
     </a>
     <span>Advanced IDE for Vue</span>
   </section>
 
   <section id="highlights" class="vt-box-container">
     <div class="vt-box">
-      <h2>Approachable</h2>
-      <p>
-        Builds on top of standard HTML, CSS and JavaScript with intuitive
-        API and world-class documentation.
-      </p>
+      <h2>Gần gũi</h2>
+      <p>Xây dựng dựa trên HTML, CSS và JavaScript, với API trực quan và tài liệu đẳng cấp thế giới.</p>
     </div>
     <div class="vt-box">
-      <h2>Performant</h2>
-      <p>
-        Truly reactive, compiler-optimized rendering system that rarely
-        requires manual optimization.
-      </p>
+      <h2>Mạnh mẽ</h2>
+      <p>Hệ thống render hoàn toàn reactive và được tối ưu hóa từ bước biên dịch, hiếm khi cần đến tối ưu thủ công.</p>
     </div>
     <div class="vt-box">
-      <h2>Versatile</h2>
-      <p>
-        A rich, incrementally adoptable ecosystem that scales between a
-        library and a full-featured framework.
-      </p>
+      <h2>Linh hoạt</h2>
+      <p>Một hệ sinh thái phong phú từ cơ bản đến nâng cao, từ một thư viện đơn giản đến một framework đầy đủ tính năng.</p>
     </div>
   </section>
 
   <section id="sponsors">
-    <h2>Platinum Sponsors</h2>
+    <h2>Nhà tài trợ Bạch Kim</h2>
     <SponsorsGroup tier="platinum" placement="landing" />
-    <h2>Gold Sponsors</h2>
+    <h2>Nhà tài trợ Vàng</h2>
     <SponsorsGroup tier="gold" placement="landing" />
   </section>
 

.vitepress/theme/components/NewsLetter.vue

@@ -5,7 +5,7 @@ import { VTLink } from '@vue/theme'
 <template>
   <section id="newsletter" class="NewsLetter">
     <div class="container">
-      <h2 class="title">Subscribe to our weekly newsletter.</h2>
+      <h2 class="title">Đăng ký nhận bản tin hàng tuần của chúng tôi.</h2>
 
       <div class="form">
         <form
@@ -22,7 +22,7 @@ import { VTLink } from '@vue/theme'
             id="member_email"
             name="member[email]"
             type="email"
-            placeholder="Email address"
+            placeholder="Địa chỉ email"
             required
           />
 
@@ -32,20 +32,20 @@ import { VTLink } from '@vue/theme'
               id="member_submit"
               name="member[subscribe]"
               type="submit"
-              value="SUBSCRIBE"
+              value="ĐĂNG KÝ"
             />
           </div>
         </form>
       </div>
 
       <p class="help">
-        You can read the previous issues and listen to our podcast at
+        Bạn có thể đọc các số trước và nghe podcast của chúng tôi tại
         <VTLink
           class="link"
           href="https://news.vuejs.org/"
           no-icon
-        >news.vuejs.org</VTLink>. You may also go social at
-        <VTLink class="link" href="https://twitter.com/vuejs" no-icon>Twitter</VTLink>, or join our home at
+        >news.vuejs.org</VTLink>. Bạn cũng có thể theo dõi
+        <VTLink class="link" href="https://twitter.com/vuejs" no-icon>Twitter</VTLink>, hoặc tham gia
         <VTLink class="link" href="https://chat.vuejs.org/" no-icon>Discord</VTLink>.
       </p>
     </div>

.vitepress/theme/components/SponsorsGroup.vue

@@ -69,10 +69,7 @@ onMounted(async () => {
         rel="sponsored noopener"
       >
         <picture v-if="img.endsWith('png')">
-          <source
-            type="image/avif"
-            :srcset="`${base}/images/${img.replace(/\.png$/, '.avif')}`"
-          />
+          <source type="image/avif" :srcset="`${base}/images/${img.replace(/\.png$/, '.avif')}`" />
           <img :src="`${base}/images/${img}`" :alt="name" />
         </picture>
         <img v-else :src="`${base}/images/${img}`" :alt="name" />
@@ -82,8 +79,7 @@ onMounted(async () => {
       v-if="placement !== 'page' && tier !== 'special'"
       href="/sponsor/"
       class="sponsor-item action"
-      >Your logo</a
-    >
+    >Logo của bạn</a>
   </div>
 </template>