From f05ef928de8a594a237a16835a7c7138e4ee3120 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Mon, 26 Jun 2023 12:04:48 +0700
Subject: [PATCH 01/11] docs: translate homepage content

---
 src/components/Layout/HomeContent.js | 70 +++++++++++++++-------------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index ba3ff6ef1..4853c359f 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -131,7 +131,7 @@ export function HomeContent() {
             React
           </h1>
           <p className="text-4xl font-display max-w-lg md:max-w-full py-1 text-center text-secondary dark:text-primary-dark leading-snug self-center">
-            The library for web and native user interfaces
+            Pustaka untuk antarmuka pengguna web dan native
           </p>
           <div className="mt-5 self-center flex gap-2 w-full sm:w-auto flex-col sm:flex-row">
             <ButtonLink
@@ -139,29 +139,29 @@ export function HomeContent() {
               type="primary"
               size="lg"
               className="w-full sm:w-auto justify-center"
-              label="Learn React">
-              Learn React
+              label="Belajar React">
+              Belajar React
             </ButtonLink>
             <ButtonLink
               href={'/reference/react'}
               type="secondary"
               size="lg"
               className="w-full sm:w-auto justify-center"
-              label="API Reference">
-              API Reference
+              label="Referensi API">
+              Referensi API
             </ButtonLink>
           </div>
         </div>
 
         <Section background="left-card">
           <Center>
-            <Header>Create user interfaces from components</Header>
+            <Header>Membuat antarmuka pengguna dari komponen</Header>
             <Para>
-              React lets you build user interfaces out of individual pieces
-              called components. Create your own React components like{' '}
-              <Code>Thumbnail</Code>, <Code>LikeButton</Code>, and{' '}
-              <Code>Video</Code>. Then combine them into entire screens, pages,
-              and apps.
+              React memungkinkan Anda membangun antarmuka penguna dari
+              bagian-bagian yang disebut komponen. Buat komponen React Anda
+              sendiri seperti <Code>Thumbnail</Code>, <Code>LikeButton</Code>,
+              dan <Code>Video</Code>. Kemudian gabungkan komponen-komponen
+              tersebut ke dalam seluruh layar, halaman, dan aplikasi.
             </Para>
           </Center>
           <FullBleed>
@@ -169,22 +169,23 @@ export function HomeContent() {
           </FullBleed>
           <Center>
             <Para>
-              Whether you work on your own or with thousands of other
-              developers, using React feels the same. It is designed to let you
-              seamlessly combine components written by independent people,
-              teams, and organizations.
+              Baik Anda bekerja sendiri atau dengan ribuan pengembang lain,
+              menggunakan React akan terasa sama. React dirancang untuk
+              memungkinkan Anda menggabungkan komponen yang dirancang oleh
+              pengembang independen, tim, dan organisasi besar secara mulus.
             </Para>
           </Center>
         </Section>
 
         <Section background="right-card">
           <Center>
-            <Header>Write components with code and markup</Header>
+            <Header>Menulis komponen dengan kode dan markup</Header>
             <Para>
-              React components are JavaScript functions. Want to show some
-              content conditionally? Use an <Code>if</Code> statement.
-              Displaying a list? Try array <Code>map()</Code>. Learning React is
-              learning programming.
+              Komponen React adalah fungsi JavaScript. Ingin menampilkan
+              beberapa konten secara kondisional? Gunakan pernyataan{' '}
+              <Code>if</Code>. Menampilkan sebuah daftar? Gunakan fungsi{' '}
+              <Code>map()</Code> ke sebuah senarai. Belajar React adalah belajar
+              pemrograman.
             </Para>
           </Center>
           <FullBleed>
@@ -192,22 +193,25 @@ export function HomeContent() {
           </FullBleed>
           <Center>
             <Para>
-              This markup syntax is called JSX. It is a JavaScript syntax
-              extension popularized by React. Putting JSX markup close to
-              related rendering logic makes React components easy to create,
-              maintain, and delete.
+              Sintaksis markup ini disebut dengan JSX. Ini adalah ekstensi
+              sintaksis JavaScript yang dipopulerkan oleh React. Menempatkan
+              markup JSX dekat dengan logika rendering yang terkait membuat
+              komponen React mudah untuk dibuat, dipelihara, dan dihapus.
             </Para>
           </Center>
         </Section>
 
         <Section background="left-card">
           <Center>
-            <Header>Add interactivity wherever you need it</Header>
+            <Header>
+              Menambahkan interaktivitas di mana pun Anda membutuhkannya
+            </Header>
             <Para>
-              React components receive data and return what should appear on the
-              screen. You can pass them new data in response to an interaction,
-              like when the user types into an input. React will then update the
-              screen to match the new data.
+              Komponen React menerima data dan mengembalikan apa yang seharusnya
+              muncul di layar. Anda dapat memberikan data baru sebagai respons
+              dari sebuah interaksi, seperti ketika pengguna mengetikkan sebuah
+              input. React kemudian akan memperbarui layar agar sesuai dengan
+              data baru.
             </Para>
           </Center>
           <FullBleed>
@@ -215,16 +219,16 @@ export function HomeContent() {
           </FullBleed>
           <Center>
             <Para>
-              You don’t have to build your whole page in React. Add React to
-              your existing HTML page, and render interactive React components
-              anywhere on it.
+              Anda tidak perlu membangun seluruh halaman Anda di React.
+              Tambahkan React ke halaman HTML yang sudah ada, dan render
+              komponen React interaktif di mana saja di halaman tersebut.
             </Para>
             <div className="flex justify-start w-full lg:justify-center">
               <CTA
                 color="gray"
                 icon="code"
                 href="/learn/add-react-to-an-existing-project">
-                Add React to your page
+                Tambahkan React ke halaman Anda
               </CTA>
             </div>
           </Center>

From 07b38b8456861f6b62ac0eff24b29799e7fb3197 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Mon, 26 Jun 2023 12:21:27 +0700
Subject: [PATCH 02/11] translate bottom CTA

---
 src/components/Layout/HomeContent.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 4853c359f..69d461e2c 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -502,15 +502,15 @@ export function HomeContent() {
           <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
             <Logo className="text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
             <Header>
-              Welcome to the <br className="" />
-              React community
+              Selamat datang di <br className="" />
+              komunitas React
             </Header>
             <ButtonLink
               href={'/learn'}
               type="primary"
               size="lg"
-              label="Take the Tutorial">
-              Get Started
+              label="Ikuti Tutorial">
+              Memulai
             </ButtonLink>
           </div>
         </Section>

From 624cd8795089c62ec6cbc082bebd072ec6c9a73f Mon Sep 17 00:00:00 2001
From: M Haidar Hanif <git@mhaidarhanif.com>
Date: Mon, 26 Jun 2023 14:35:44 +0700
Subject: [PATCH 03/11] docs: translate home content video component props

---
 src/components/Layout/HomeContent.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 69d461e2c..186ee5092 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -926,8 +926,8 @@ function Example1() {
           <Video
             video={{
               id: 'ex1-0',
-              title: 'My video',
-              description: 'Video description',
+              title: 'Video saya',
+              description: 'Deskripsi video',
               image: 'blue',
               url: null,
             }}
@@ -950,20 +950,20 @@ function Example2() {
   const videos = [
     {
       id: 'ex2-0',
-      title: 'First video',
-      description: 'Video description',
+      title: 'Video pertama',
+      description: 'Deskripsi video',
       image: 'blue',
     },
     {
       id: 'ex2-1',
-      title: 'Second video',
-      description: 'Video description',
+      title: 'Video kedua',
+      description: 'Deskripsi video',
       image: 'red',
     },
     {
       id: 'ex2-2',
-      title: 'Third video',
-      description: 'Video description',
+      title: 'Video ketiga',
+      description: 'Deskripsi video',
       image: 'green',
     },
   ];

From 5f05b0284952c5c51b896c36c8982d3be4bc90b8 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Mon, 26 Jun 2023 16:49:03 +0700
Subject: [PATCH 04/11] translate rest of example contents

---
 src/components/Layout/HomeContent.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 186ee5092..f76db3192 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -982,7 +982,7 @@ function Example2() {
   const count = videos.length;
   let heading = emptyHeading;
   if (count > 0) {
-    const noun = count > 1 ? 'Videos' : 'Video';
+    const noun = 'Video';
     heading = count + ' ' + noun;
   }
   return (
@@ -1024,7 +1024,7 @@ function Example3() {
     {
       id: 'vids-0',
       title: 'React: The Documentary',
-      description: 'The origin story of React',
+      description: 'Sejarah awal mula React',
       image: '/images/home/videos/documentary.webp',
       url: 'https://www.youtube.com/watch?v=8pDqJVdNa44',
     },
@@ -1045,14 +1045,14 @@ function Example3() {
     {
       id: 'vids-3',
       title: 'Introducing React Hooks',
-      description: 'Sophie Alpert and Dan Abramov (2018)',
+      description: 'Sophie Alpert dan Dan Abramov (2018)',
       image: '/images/home/videos/hooks.jpg',
       url: 'https://www.youtube.com/watch?v=V-QO-KO90iQ',
     },
     {
       id: 'vids-4',
       title: 'Introducing Server Components',
-      description: 'Dan Abramov and Lauren Tan (2020)',
+      description: 'Dan Abramov dan Lauren Tan (2020)',
       image: '/images/home/videos/rsc.jpg',
       url: 'https://www.youtube.com/watch?v=TQQPAU21ZUw',
     },
@@ -1095,10 +1095,10 @@ function SearchableVideoList({ videos }) {
             contentMarginTop="72px"
             height="30rem">
             <h1 className="mx-4 mb-1 font-bold text-3xl text-primary">
-              React Videos
+              Video-video React
             </h1>
             <p className="mx-4 mb-0 leading-snug text-secondary text-xl">
-              A brief history of React
+              Sejarah singkat React
             </p>
             <div className="px-4 pb-4">
               <SearchableVideoList videos={videos} />
@@ -1446,7 +1446,7 @@ function VideoList({videos, emptyHeading}) {
   let heading = emptyHeading;
   const count = videos.length;
   if (count > 0) {
-    const noun = count > 1 ? 'Videos' : 'Video';
+    const noun = 'Video';
     heading = count + ' ' + noun;
   }
   return (
@@ -1473,7 +1473,7 @@ function SearchInput({value, onChange}) {
       data-hover="SearchInput"
       onSubmit={(e) => e.preventDefault()}>
       <label htmlFor={id} className="sr-only">
-        Search
+        Telusuri
       </label>
       <div className="relative w-full">
         <div className="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
@@ -1483,7 +1483,7 @@ function SearchInput({value, onChange}) {
           type="text"
           id={id}
           className="flex pl-11 py-4 h-10 w-full bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-left text-primary rounded-full align-middle text-base"
-          placeholder="Search"
+          placeholder="Telusuri"
           value={value}
           onChange={(e) => onChange(e.target.value)}
         />
@@ -2393,7 +2393,7 @@ function fetchTalks(confId) {
           {
             id: 'conf-2021-0',
             title: 'React 18 Keynote',
-            description: 'The React Team',
+            description: 'Tim React',
             url: 'https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=1',
             image: {
               speakers: [
@@ -2506,7 +2506,7 @@ function fetchTalks(confId) {
           {
             id: 'conf-2021-12',
             title: 'React Native Desktop',
-            description: 'Eric Rozell and Steven Moyes',
+            description: 'Eric Rozell dan Steven Moyes',
             url: 'https://www.youtube.com/watch?v=9L4FFrvwJwY&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=13',
             image: {
               speakers: [
@@ -2648,7 +2648,7 @@ function fetchTalks(confId) {
           {
             id: 'conf-2019-8',
             title: 'Building (And Re-Building) the Airbnb Design System',
-            description: 'Maja Wichrowska and Tae Kim',
+            description: 'Maja Wichrowska dan Tae Kim',
             url: 'https://www.youtube.com/watch?v=fHQ1WSx41CA&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=13',
             image: {
               speakers: [

From 11272a0d265a0c705c771f341120ea2f44ce99d2 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Mon, 26 Jun 2023 16:52:57 +0700
Subject: [PATCH 05/11] add suggestions from code review

---
 src/components/Layout/HomeContent.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index f76db3192..4e82433ad 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -67,6 +67,10 @@ function Para({children}) {
   );
 }
 
+function Italic({children}) {
+  return <em className="italic">{children}</em>;
+}
+
 function Left({children}) {
   return (
     <div className="px-5 lg:px-0 max-w-4xl lg:text-left text-white text-opacity-80">
@@ -171,8 +175,8 @@ export function HomeContent() {
             <Para>
               Baik Anda bekerja sendiri atau dengan ribuan pengembang lain,
               menggunakan React akan terasa sama. React dirancang untuk
-              memungkinkan Anda menggabungkan komponen yang dirancang oleh
-              pengembang independen, tim, dan organisasi besar secara mulus.
+              memungkinkan Anda menggabungkan komponen secara mulus yang
+              dirancang oleh pengembang independen, tim, dan organisasi.
             </Para>
           </Center>
         </Section>
@@ -184,8 +188,8 @@ export function HomeContent() {
               Komponen React adalah fungsi JavaScript. Ingin menampilkan
               beberapa konten secara kondisional? Gunakan pernyataan{' '}
               <Code>if</Code>. Menampilkan sebuah daftar? Gunakan fungsi{' '}
-              <Code>map()</Code> ke sebuah senarai. Belajar React adalah belajar
-              pemrograman.
+              <Code>map()</Code> ke sebuah senarai (<Italic>array</Italic>).
+              Belajar React adalah belajar pemrograman.
             </Para>
           </Center>
           <FullBleed>

From fda809ac7e91129588fc3eff415b0ade7b36b477 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Tue, 27 Jun 2023 17:21:20 +0700
Subject: [PATCH 06/11] docs: telusuri -> cari

---
 src/components/Layout/HomeContent.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 4e82433ad..ede4cf7df 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -1477,7 +1477,7 @@ function SearchInput({value, onChange}) {
       data-hover="SearchInput"
       onSubmit={(e) => e.preventDefault()}>
       <label htmlFor={id} className="sr-only">
-        Telusuri
+        Cari
       </label>
       <div className="relative w-full">
         <div className="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
@@ -1487,7 +1487,7 @@ function SearchInput({value, onChange}) {
           type="text"
           id={id}
           className="flex pl-11 py-4 h-10 w-full bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-left text-primary rounded-full align-middle text-base"
-          placeholder="Telusuri"
+          placeholder="Cari"
           value={value}
           onChange={(e) => onChange(e.target.value)}
         />

From d9bb84f352b96b1e075a2a7642df643066e79099 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Thu, 29 Jun 2023 16:25:20 +0700
Subject: [PATCH 07/11] docs: translate more sections

---
 src/components/Layout/HomeContent.js | 123 +++++++++++++++------------
 1 file changed, 67 insertions(+), 56 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index ede4cf7df..17d6de0d2 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -67,10 +67,6 @@ function Para({children}) {
   );
 }
 
-function Italic({children}) {
-  return <em className="italic">{children}</em>;
-}
-
 function Left({children}) {
   return (
     <div className="px-5 lg:px-0 max-w-4xl lg:text-left text-white text-opacity-80">
@@ -188,8 +184,8 @@ export function HomeContent() {
               Komponen React adalah fungsi JavaScript. Ingin menampilkan
               beberapa konten secara kondisional? Gunakan pernyataan{' '}
               <Code>if</Code>. Menampilkan sebuah daftar? Gunakan fungsi{' '}
-              <Code>map()</Code> ke sebuah senarai (<Italic>array</Italic>).
-              Belajar React adalah belajar pemrograman.
+              <Code>map()</Code> ke sebuah senarai (<i>array</i>). Belajar React
+              adalah belajar pemrograman.
             </Para>
           </Center>
           <FullBleed>
@@ -241,14 +237,16 @@ export function HomeContent() {
         <Section background="right-card">
           <Center>
             <Header>
-              Go full-stack <br className="hidden lg:inline" />
-              with a framework
+              Pengembangan <i>full-stack</i> dengan kerangka kerja (
+              <i>framework</i>)
             </Header>
             <Para>
-              React is a library. It lets you put components together, but it
-              doesn’t prescribe how to do routing and data fetching. To build an
-              entire app with React, we recommend a full-stack React framework
-              like <Link href="https://nextjs.org">Next.js</Link> or{' '}
+              React adalah sebuah pustaka. React memungkinkan Anda untuk
+              menyatukan komponen-komponen, tetapi tidak menentukan bagaimana
+              cara melakukan <i>routing</i> dan pengambilan data. Untuk
+              membangun aplikasi secara keseluruhan dengan React, kami
+              merekomendasikan kerangka kerja <i>full-stack</i> React seperti{' '}
+              <Link href="https://nextjs.org">Next.js</Link> atau{' '}
               <Link href="https://remix.run">Remix</Link>.
             </Para>
           </Center>
@@ -257,17 +255,18 @@ export function HomeContent() {
           </FullBleed>
           <Center>
             <Para>
-              React is also an architecture. Frameworks that implement it let
-              you fetch data in asynchronous components that run on the server
-              or even during the build. Read data from a file or a database, and
-              pass it down to your interactive components.
+              React juga merupakan sebuah arsitektur. Kerangka kerja yang
+              mengimplementasikannya memungkinkan Anda mengambil data dalam
+              komponen asinkron (<i>asynchronous</i>) yang berjalan di server
+              atau bahkan saat pembuatan. Baca data dari berkas atau database,
+              dan oper data tersebut ke komponen interaktif Anda.
             </Para>
             <div className="flex justify-start w-full lg:justify-center">
               <CTA
                 color="gray"
                 icon="framework"
                 href="/learn/start-a-new-react-project">
-                Get started with a framework
+                Memulai dengan framework
               </CTA>
             </div>
           </Center>
@@ -275,12 +274,16 @@ export function HomeContent() {
         <Section background="left-card">
           <div className="mx-auto flex flex-col w-full">
             <div className="mx-auto max-w-4xl lg:text-center items-center px-5 flex flex-col">
-              <Header>Use the best from every platform</Header>
+              <Header>
+                Gunakan yang terbaik untuk setiap <i>platform</i>
+              </Header>
               <Para>
-                People love web and native apps for different reasons. React
-                lets you build both web apps and native apps using the same
-                skills. It leans upon each platform’s unique strengths to let
-                your interfaces feel just right on every platform.
+                Pengguna aplikasi Anda menyukai aplikasi web dan aplikasi{' '}
+                <i>native</i> karena berbagai alasan. React memungkinkan Anda
+                membangun aplikasi web dan aplikasi <i>native</i> menggunakan
+                keterampilan yang sama. React memanfaatkan kekuatan unik dari
+                setiap <i>platform</i> untuk membuat antarmuka Anda terasa mulus
+                di setiap <i>platform</i>.
               </Para>
             </div>
             <div className="max-w-7xl mx-auto flex flex-col lg:flex-row mt-16 mb-20 lg:mb-28 px-5 gap-20 lg:gap-5">
@@ -294,15 +297,17 @@ export function HomeContent() {
                     <div className="bg-wash relative h-14 w-full" />
                     <div className="relative flex items-start justify-center flex-col flex-1 pb-16 pt-5 gap-3 px-5 lg:px-10 lg:pt-8">
                       <h4 className="leading-tight text-primary font-semibold text-3xl lg:text-4xl">
-                        Stay true to the web
+                        Tetap dekat dengan web
                       </h4>
                       <p className="lg:text-xl leading-normal text-secondary">
-                        People expect web app pages to load fast. On the server,
-                        React lets you start streaming HTML while you’re still
-                        fetching data, progressively filling in the remaining
-                        content before any JavaScript code loads. On the client,
-                        React can use standard web APIs to keep your UI
-                        responsive even in the middle of rendering.
+                        Orang-orang mengharapkan halaman aplikasi web dimuat
+                        dengan cepat. Di server, React memungkinkan Anda untuk
+                        mulai melakukan <i>streaming</i> HTML ketika Anda masih
+                        mengambil data, mengisi sisa konten secara progresif
+                        sebelum koda JavaScript dimuat. Pada <i>client</i>,
+                        React dapat menggunakan API web standar untuk menjaga UI
+                        Anda tetap responsif bahkan di tengah-tengah proses pe-
+                        <i>render</i>-an.
                       </p>
                     </div>
                   </div>
@@ -380,21 +385,25 @@ export function HomeContent() {
                       </div>
                       <div className="flex flex-col items-start justify-center pt-0 gap-3 px-2.5 lg:pt-8 lg:px-8">
                         <h4 className="leading-tight text-primary dark:text-primary-dark font-semibold text-3xl lg:text-4xl">
-                          Go truly native
+                          Rangkul pengembangan <i>native</i>
                         </h4>
                         <p className="h-full lg:text-xl text-secondary dark:text-secondary-dark leading-normal">
-                          People expect native apps to look and feel like their
-                          platform.{' '}
+                          Orang-orang mengharapkan aplikasi <i>native</i>
+                          terlihat dan terasa seperti <i>
+                            platform
+                          </i> mereka.{' '}
                           <Link href="https://reactnative.dev">
                             React Native
                           </Link>{' '}
-                          and{' '}
+                          dan{' '}
                           <Link href="https://github.com/expo/expo">Expo</Link>{' '}
-                          let you build apps in React for Android, iOS, and
-                          more. They look and feel native because their UIs{' '}
-                          <i>are</i> truly native. It’s not a web view—your
-                          React components render real Android and iOS views
-                          provided by the platform.
+                          memungkinkan Anda membuat aplikasi dengan React untuk
+                          Android, iOS, dan lainnya. Aplikasi-aplikasi tersebut
+                          terlihat dan terasa native karena UI mereka{' '}
+                          <i>benar-benar</i> native. Ini bukan <i>web view</i>
+                          —komponen React Anda me-<i>render</i> <i>view</i>{' '}
+                          Android dan iOS asli yang disediakan oleh{' '}
+                          <i>platform</i> masing-masing.
                         </p>
                       </div>
                     </div>
@@ -404,14 +413,16 @@ export function HomeContent() {
             </div>
             <div className="px-5 lg:px-0 max-w-4xl mx-auto lg:text-center text-secondary dark:text-secondary-dark">
               <Para>
-                With React, you can be a web <i>and</i> a native developer. Your
-                team can ship to many platforms without sacrificing the user
-                experience. Your organization can bridge the platform silos, and
-                form teams that own entire features end-to-end.
+                Dengan React, Anda dapat menjadi seorang pengembang web{' '}
+                <i>dan</i> pengembang <i>native</i>. Tim Anda dapat meluncurkan
+                aplikasi ke banyak platform tanpa mengorbankan pengalaman
+                pengguna (<i>user experience</i>, <i>UX</i>). Organisasi Anda
+                dapat menjembatani silo <i>platform</i>, dan membentuk tim yang
+                memiliki seluruh fitur secara <i>end-to-end</i>.
               </Para>
               <div className="flex justify-start w-full lg:justify-center">
                 <CTA color="gray" icon="native" href="https://reactnative.dev/">
-                  Build for native platforms
+                  Membangun untuk platform native.
                 </CTA>
               </div>
             </div>
@@ -446,7 +457,7 @@ export function HomeContent() {
               <div className="w-full lg:w-6/12">
                 <p className="uppercase tracking-wide font-bold text-sm text-tertiary dark:text-tertiary-dark flex flex-row gap-2 items-center mt-5 lg:-mt-2 w-full">
                   <IconChevron />
-                  Latest React News
+                  Berita React terbaru
                 </p>
                 <div className="flex-col sm:flex-row flex-wrap flex gap-5 text-left my-5">
                   <div className="flex-1 min-w-[40%]">
@@ -477,13 +488,12 @@ export function HomeContent() {
             <div className="mx-auto flex flex-col max-w-4xl">
               <Center>
                 <Header>
-                  Join a community <br className="hidden lg:inline" />
-                  of millions
+                  Bergabung dalam komunitas beranggotakan jutaan orang
                 </Header>
                 <Para>
-                  You’re not alone. Two million developers from all over the
-                  world visit the React docs every month. React is something
-                  that people and teams can agree on.
+                  Anda tidak sendirian. Dua juta pengembang dari seluruh dunia
+                  mengunjungi dokumentasi React setiap bulannya. React adalah
+                  pustaka yang dapat disetujui oleh semua orang dan tim.
                 </Para>
               </Center>
             </div>
@@ -491,13 +501,14 @@ export function HomeContent() {
             <div className="mx-auto flex flex-col max-w-4xl">
               <Center>
                 <Para>
-                  This is why React is more than a library, an architecture, or
-                  even an ecosystem. React is a community. It’s a place where
-                  you can ask for help, find opportunities, and meet new
-                  friends. You will meet both developers and designers,
-                  beginners and experts, researchers and artists, teachers and
-                  students. Our backgrounds may be very different, but React
-                  lets us all create user interfaces together.
+                  Inilah mengapa React lebih dari sekedar pustaka, arsitektur,
+                  atau bahkan sebuah ekosistem. React adalah sebuah komunitas.
+                  Ini adalah tempat di mana Anda dapat meminta bantuan,
+                  menemukan peluang kerja, dan bertemu teman baru. Anda akan
+                  bertemu dengan para pengembang dan desainer, pemula dan ahli,
+                  peneliti dan seniman, pengajar dan murid. Latar belakang kita
+                  mungkin sangat berbeda, tetapi React memungkinkan kita semua
+                  membuat antarmuka pengguna bersama-sama.
                 </Para>
               </Center>
             </div>

From 5a24cc06e306dcd40a1f8773fbf6613343c0a175 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Thu, 29 Jun 2023 16:31:41 +0700
Subject: [PATCH 08/11] docs: fully translate page content

---
 src/components/Layout/HomeContent.js | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 17d6de0d2..1357284d0 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -422,7 +422,7 @@ export function HomeContent() {
               </Para>
               <div className="flex justify-start w-full lg:justify-center">
                 <CTA color="gray" icon="native" href="https://reactnative.dev/">
-                  Membangun untuk platform native.
+                  Membangun untuk platform native
                 </CTA>
               </div>
             </div>
@@ -433,23 +433,28 @@ export function HomeContent() {
           <div className="max-w-7xl mx-auto flex flex-col lg:flex-row px-5">
             <div className="max-w-3xl lg:max-w-7xl gap-5 flex flex-col lg:flex-row lg:px-5">
               <div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:pl-5 lg:pr-10">
-                <Header>Upgrade when the future is ready</Header>
+                <Header>
+                  <i>Upgrade</i> ketika fitur baru telah siap
+                </Header>
                 <Para>
-                  React approaches changes with care. Every React commit is
-                  tested on business-critical surfaces with over a billion
-                  users. Over 100,000 React components at Meta help validate
-                  every migration strategy.
+                  React melakukan pendekatan perubahan dengan hati-hati. Setiap
+                  <i>commit</i> yang dilakukan React diuji pada lapisan aplikasi
+                  sangat penting dengan lebih dari satu miliar pengguna. Lebih
+                  dari 100.000 komponen React di Meta membantu memvalidasi
+                  setiap strategi migrasi.
                 </Para>
                 <div className="order-last pt-5">
                   <Para>
-                    The React team is always researching how to improve React.
-                    Some research takes years to pay off. React has a high bar
-                    for taking a research idea into production. Only proven
-                    approaches become a part of React.
+                    Tim React selalu meneliti bagaimana cara meningkatkan React.
+                    Beberapa penelitian membutuhkan waktu bertahun-tahun untuk
+                    membuahkan hasil. React memiliki standar yang tinggi untuk
+                    membawa ide penelitian ke dalam lingkungan produksi. Hanya
+                    pendekatan yang telah terbukti yang akan menjadi bagian dari
+                    React.
                   </Para>
                   <div className="hidden lg:flex justify-start w-full">
                     <CTA color="gray" icon="news" href="/blog">
-                      Read more React news
+                      Baca berita React lebih lengkap
                     </CTA>
                   </div>
                 </div>

From 5a2dbfd306a5581ae3ee2976e6c5287ee349bc42 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Thu, 29 Jun 2023 16:37:39 +0700
Subject: [PATCH 09/11] docs: minor spacing fix

---
 src/components/Layout/HomeContent.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 1357284d0..8343eb5d5 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -388,10 +388,8 @@ export function HomeContent() {
                           Rangkul pengembangan <i>native</i>
                         </h4>
                         <p className="h-full lg:text-xl text-secondary dark:text-secondary-dark leading-normal">
-                          Orang-orang mengharapkan aplikasi <i>native</i>
-                          terlihat dan terasa seperti <i>
-                            platform
-                          </i> mereka.{' '}
+                          Orang-orang mengharapkan aplikasi <i>native</i>{' '}
+                          terlihat dan terasa seperti <i>platform</i> mereka.{' '}
                           <Link href="https://reactnative.dev">
                             React Native
                           </Link>{' '}

From ed0e4228c75832463a14eece6eb01f9daab48546 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Sat, 1 Jul 2023 10:31:29 +0700
Subject: [PATCH 10/11] docs: fix some spacing

---
 src/components/Layout/HomeContent.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 8343eb5d5..0cd115d14 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -193,10 +193,11 @@ export function HomeContent() {
           </FullBleed>
           <Center>
             <Para>
-              Sintaksis markup ini disebut dengan JSX. Ini adalah ekstensi
-              sintaksis JavaScript yang dipopulerkan oleh React. Menempatkan
-              markup JSX dekat dengan logika rendering yang terkait membuat
-              komponen React mudah untuk dibuat, dipelihara, dan dihapus.
+              Sintaksis <i>markup</i> ini disebut dengan JSX. Ini adalah
+              ekstensi sintaksis JavaScript yang dipopulerkan oleh React.
+              Menempatkan markup JSX dekat dengan logika rendering yang terkait
+              membuat komponen React mudah untuk dibuat, dipelihara, dan
+              dihapus.
             </Para>
           </Center>
         </Section>
@@ -435,7 +436,7 @@ export function HomeContent() {
                   <i>Upgrade</i> ketika fitur baru telah siap
                 </Header>
                 <Para>
-                  React melakukan pendekatan perubahan dengan hati-hati. Setiap
+                  React melakukan pendekatan perubahan dengan hati-hati. Setiap{' '}
                   <i>commit</i> yang dilakukan React diuji pada lapisan aplikasi
                   sangat penting dengan lebih dari satu miliar pengguna. Lebih
                   dari 100.000 komponen React di Meta membantu memvalidasi
@@ -1099,7 +1100,7 @@ function SearchableVideoList({ videos }) {
         onChange={newText => setSearchText(newText)} />
       <VideoList
         videos={foundVideos}
-        emptyHeading={\`No matches for “\${searchText}”\`} />
+        emptyHeading={\`Kata kunci “\${searchText}” tidak ditemukan\`} />
     </>
   );
 }`}</div>
@@ -1438,7 +1439,7 @@ function SearchableVideoList({videos}) {
       <SearchInput value={searchText} onChange={setSearchText} />
       <VideoList
         videos={foundVideos}
-        emptyHeading={`No matches for “${searchText}”`}
+        emptyHeading={`Kata kunci “${searchText}” tidak ditemukan`}
       />
     </div>
   );

From 9e0db0209cf3f43bb9dbd474ef9ef78eba10ad17 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Sat, 1 Jul 2023 10:32:38 +0700
Subject: [PATCH 11/11] docs: increase heading width for better readability

---
 src/components/Layout/HomeContent.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 0cd115d14..2acc760cb 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -53,7 +53,7 @@ function Section({children, background = null}) {
 
 function Header({children}) {
   return (
-    <h2 className="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-xl">
+    <h2 className="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-2xl">
       {children}
     </h2>
   );