From 878cc227e923931a5e8d6a51fd053a405ddbcf47 Mon Sep 17 00:00:00 2001
From: tmtm8976 <fatemayasser8976@gmail.com>
Date: Thu, 3 Aug 2023 01:25:12 +0300
Subject: [PATCH] translating HomeContent.js

---
 src/components/Layout/HomeContent.js | 231 ++++++++++++++-------------
 1 file changed, 119 insertions(+), 112 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index e1b1b440d..2ac1deed0 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -113,7 +113,7 @@ const recentPosts = blogSidebar.routes.slice(0, 4).map((entry) => ({
 export function HomeContent() {
   return (
     <>
-      <div className="pl-0">
+      <div className="pl-0" dir="rtl">
         <div className="mx-5 mt-12 lg:mt-24 mb-20 lg:mb-32 flex flex-col justify-center">
           <Logo
             className={cn(
@@ -121,10 +121,10 @@ export function HomeContent() {
             )}
           />
           <h1 className="text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">
-            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
+            مكتبة واجهات المستخدم الويبية والمحلية
           </p>
           <div className="mt-5 self-center flex gap-2 w-full sm:w-auto flex-col sm:flex-row">
             <ButtonLink
@@ -133,7 +133,7 @@ export function HomeContent() {
               size="lg"
               className="w-full sm:w-auto justify-center"
               label="Learn React">
-              Learn React
+              تعلم ريأكت
             </ButtonLink>
             <ButtonLink
               href={'/reference/react'}
@@ -141,83 +141,86 @@ export function HomeContent() {
               size="lg"
               className="w-full sm:w-auto justify-center"
               label="API Reference">
-              API Reference
+              (API)مرجع واجهات برمجة التطبيقات
             </ButtonLink>
           </div>
         </div>
 
         <Section background="left-card">
           <Center>
-            <Header>Create user interfaces from components</Header>
+            <Header>إنشاء واجهات المستخدم من المكونات</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.
+              يسمح ريأكت ببناء واجهات المستخدم من قطع فردية تسمى المكونات. يمكنك
+              إنشاء مكونات ريأكت الخاصة بك مثل:
+              <Code>Video</Code>,و <Code>LikeButton</Code>,و{' '}
+              <Code>Thumbnail</Code> ثم قم بدمجها في شاشات كاملة وصفحات
+              وتطبيقات.
             </Para>
           </Center>
           <FullBleed>
-            <Example1 />
+            <div dir="ltr">
+              <Example1 />
+            </div>
           </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.
+              سواء كنت تعمل بمفردك أو مع آلاف المطورين الآخرين، فأن شعور استخدام
+              ريأكت متماثل. فهو مصمم ليتيح لك دمج المكونات التي تمت كتابتها
+              بواسطة أشخاص مستقلين، وفِرَق العمل، والمؤسسات بسهولة وبسلاسة.
             </Para>
           </Center>
         </Section>
 
         <Section background="right-card">
           <Center>
-            <Header>Write components with code and markup</Header>
+            <Header>كتابة المكونات باستخدام الcode وال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.
+              مكونات ريأكت هي وظائف JavaScript. هل ترغب في عرض بعض المحتوى بشكل
+              مشروط؟ استخدم شرطًا عبارة<Code>if</Code> . تعرض قائمة؟ جرب استخدام
+              مصفوفة(array). <Code>map()</Code>. تعلُم ريأكت هو تعلُم البرمجة.
             </Para>
           </Center>
           <FullBleed>
-            <Example2 />
+            <div dir="ltr">
+              <Example2 />
+            </div>
           </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.
+              هذا ال<Code>markup</Code> يُسمى <Code>JSX</Code>. إنها markup
+              JavaScript وقد اشتهر بفضل ريأكت. وضع بناء JSX بالقرب من منطق العرض
+              المرتبط حيث يسهل من إنشاء وصيانة وحذف مكونات ريأكت.
             </Para>
           </Center>
         </Section>
 
         <Section background="left-card">
           <Center>
-            <Header>Add interactivity wherever you need it</Header>
+            <Header>أضف التفاعلية أينما تحتاجها.</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.
+              تستلم مكونات ريأكت البيانات وترجع ما يجب أن يظهر على الشاشة. يمكنك
+              تمرير بيانات جديدة إليها استجابةً لتفاعل ما، مثل عندما يقوم
+              المستخدم بكتابة في حقل الإدخال. ستقوم ريأكت بعد ذلك بتحديث الشاشة
+              لتتطابق مع البيانات الجديدة.
             </Para>
           </Center>
           <FullBleed>
-            <Example3 />
+            <div dir="ltr">
+              <Example3 />
+            </div>
           </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.
+              لا حاجة لبناء الصفحة بأكملها باستخدام ريأكت. يمكنك إضافة ريأكت إلى
+              صفحة HTML الحالية الخاصة بك وتقديم مكونات ريأكت التفاعلية في أي
+              مكان في الصفحة
             </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
+                أضف ريأكت إلى صفحتك.
               </CTA>
             </div>
           </Center>
@@ -226,33 +229,35 @@ export function HomeContent() {
         <Section background="right-card">
           <Center>
             <Header>
-              Go full-stack <br className="hidden lg:inline" />
-              with a framework
+              انتقل إلى الاستخدام الشامل <br className="hidden lg:inline" />
+              مع إطار عمل .
             </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{' '}
+              ريأكت هو مكتبة تسمح لك بتجميع المكونات معًا, ولكنها لا تحدد كيفية
+              التوجيه (Routing) وجلب البيانات. لبناء تطبيق كامل باستخدام ريأكت،
+              نوصي باستخدام إطار عمل ريأكت شامل مثل... (يرجى تحديد إطار العمل
+              المرغوب فيه). <Link href="https://nextjs.org">Next.js</Link> أو{' '}
               <Link href="https://remix.run">Remix</Link>.
             </Para>
           </Center>
           <FullBleed>
-            <Example4 />
+            <div dir="ltr">
+              <Example4 />
+            </div>
           </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.
+              ريأكت هو أيضًا بنية معمارية. الإطارات البرمجية التي تنفذها تتيح لك
+              جلب البيانات في مكونات غير متزامنة تعمل على الخادم(server) أو حتى
+              أثناء عملية البناء. يمكنك قراءة البيانات من ملف أو قاعدة بيانات
+              وتمريرها إلى مكوناتك التفاعلية.
             </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
+                ابدأ مع إطار العمل.
               </CTA>
             </div>
           </Center>
@@ -260,12 +265,12 @@ 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>استخدم الأفضل من كل منصة.</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.
+                يحب الناس تطبيقات الويب والتطبيقات الأصلية لأسباب مختلفة. يسمح
+                لك ريأكت ببناء تطبيقات ويب وتطبيقات أصلية باستخدام نفس المهارات.
+                يعتمد على نقاط القوة الفريدة لكل منصة لتمكين واجهاتك من ان تبدو
+                صائبه على كل منصة.
               </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">
@@ -279,15 +284,15 @@ 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
+                        ابق صادقًا تجاه الويب.
                       </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.
+                        يتوقع الناس أن تحمّل صفحات تطبيقات الويب بسرعة. على
+                        الخادم(server)، يتيح لك ريأكت البدء في تدفق HTML بينما
+                        تقوم بجلب البيانات، وتعبئة المحتوى المتبقي تدريجياً قبل
+                        تحميل أي كود JavaScript. على العميل، يمكن لـ ريأكت
+                        استخدام واجهات برمجة تطبيقات الويب القياسية لجعل واجهة
+                        المستخدم الخاصة بك مستجيبة حتى في وسط التقديم.
                       </p>
                     </div>
                   </div>
@@ -365,21 +370,22 @@ 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
+                          انطلق الي التطبيقات الأصيلة
                         </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.{' '}
+                          يتوقع الناس أن يكون للتطبيقات الأصلية نفس المظهر
+                          والشعور لمنصتهم.{' '}
                           <Link href="https://reactnative.dev">
                             React Native
                           </Link>{' '}
-                          and{' '}
+                          و{' '}
                           <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.
+                          يتيح لك بناء تطبيقات في ريأكت لنظامي Android و iOS
+                          وغيرهما. تبدو وكأنها تطبيقات Native بسبب واجهاتها التي
+                          تشعرهم بالأصالة. <i>ان تكون </i>
+                          حقاً أصليّة. ليست عرض ويب— مكونات ريأكت الخاصة بك تقوم
+                          بعرض عروض Android و iOS الحقيقية المقدمة من قبل
+                          النظام.
                         </p>
                       </div>
                     </div>
@@ -389,14 +395,14 @@ 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.
+                مع ريأكت, يمكنك ان تكون مطور ويب <i>و</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
+                  أنشئ للمنصات الأصلية
                 </CTA>
               </div>
             </div>
@@ -407,23 +413,23 @@ 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>التحديث عندما يكون المستقبل جاهزا</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.
+                  تتعامل ريأكت مع التغييرات بحرص. يتم اختبار كل تعديل على ريأكت
+                  على مستوى تجاري حرج مع وجود أكثر من مليار مستخدم. يساعد أكثر
+                  من 100،000 مكون ريأكت في Meta على التحقق من كل استراتيجية
+                  للترحيل..
                 </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.
+                    تعمل فرق ريأكت دائمًا على البحث عن كيفية تطوير ريأكت. قد
+                    تستغرق بعض البحوث سنوات حتى تؤتي ثمارها. يتم تحديد معايير
+                    عالية في ريأكت لاستخدام فكرة البحث في الإنتاج. تصبح الطرق
+                    المثبتة فقط جزءًا من ريأكت.
                   </Para>
                   <div className="hidden lg:flex justify-start w-full">
                     <CTA color="gray" icon="news" href="/blog">
-                      Read more React news
+                      قراءة المزيد من أخبار ريأكت
                     </CTA>
                   </div>
                 </div>
@@ -431,9 +437,11 @@ 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
+                  احدث اخبار ريأكت
                 </p>
-                <div className="flex-col sm:flex-row flex-wrap flex gap-5 text-left my-5">
+                <div
+                  className="flex-col sm:flex-row flex-wrap flex gap-5 text-left my-5"
+                  dir="ltr">
                   <div className="flex-1 min-w-[40%]">
                     <BlogCard {...recentPosts[0]} />
                   </div>
@@ -449,7 +457,7 @@ export function HomeContent() {
                 </div>
                 <div className="flex lg:hidden justify-start w-full">
                   <CTA color="gray" icon="news" href="/blog">
-                    Read more React news
+                    قراءة المزيد من أخبار ريأكت
                   </CTA>
                 </div>
               </div>
@@ -462,13 +470,13 @@ 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
+                  انضم لمجتمع <br className="hidden lg:inline" />
+                  من الملايين
                 </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.
+                  أنت لست وحدك. يزور ملفات تعريف ريأكت اثنان مليون مطور من جميع
+                  أنحاء العالم كل شهر. يعتبر ريأكت شيئًا يمكن للأشخاص والفرق
+                  الاتفاق عليه.
                 </Para>
               </Center>
             </div>
@@ -476,13 +484,12 @@ 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.
+                  لهذا السبب، فإن ريأكت ليس مجرد مكتبة أو هيكلية أو حتى بيئة.
+                  إنها مجتمع. إنها مكان يمكنك فيه طلب المساعدة والعثور على فرص
+                  ولقاء أصدقاء جدد. ستلتقي بالمطورين والمصممين، والمبتدئين
+                  والخبراء، والباحثين والفنانين، والمعلمين والطلاب. قد تختلف
+                  خلفياتنا كثيرًا، ولكن ريأكت يتيح لنا جميعًا إنشاء واجهات
+                  المستخدم معًا.
                 </Para>
               </Center>
             </div>
@@ -491,15 +498,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
+              مرحباً بك <br className="" />
+              في مجتمع ريأكت
             </Header>
             <ButtonLink
               href={'/learn'}
               type="primary"
               size="lg"
               label="Take the Tutorial">
-              Get Started
+              ابدأ الآن
             </ButtonLink>
           </div>
         </Section>
@@ -915,8 +922,8 @@ function Example1() {
           <Video
             video={{
               id: 'ex1-0',
-              title: 'My video',
-              description: 'Video description',
+              title: 'الفيديو الخاص بي',
+              description: 'وصف الفيديو',
               image: 'blue',
               url: null,
             }}
@@ -939,20 +946,20 @@ function Example2() {
   const videos = [
     {
       id: 'ex2-0',
-      title: 'First video',
-      description: 'Video description',
+      title: 'المقطع الأول',
+      description: 'وصف المقطع',
       image: 'blue',
     },
     {
       id: 'ex2-1',
-      title: 'Second video',
-      description: 'Video description',
+      title: 'المقطع الثاني',
+      description: 'وصف المقطع',
       image: 'red',
     },
     {
       id: 'ex2-2',
-      title: 'Third video',
-      description: 'Video description',
+      title: 'المقطع الثالث',
+      description: 'وصف المقطع',
       image: 'green',
     },
   ];
@@ -971,7 +978,7 @@ function Example2() {
   const count = videos.length;
   let heading = emptyHeading;
   if (count > 0) {
-    const noun = count > 1 ? 'Videos' : 'Video';
+    const noun = count > 1 ? 'مقطع' : 'مقاطع';
     heading = count + ' ' + noun;
   }
   return (
@@ -1434,7 +1441,7 @@ function VideoList({videos, emptyHeading}) {
   let heading = emptyHeading;
   const count = videos.length;
   if (count > 0) {
-    const noun = count > 1 ? 'Videos' : 'Video';
+    const noun = count > 1 ? 'مقاطع' : 'مقطع';
     heading = count + ' ' + noun;
   }
   return (