Merge pull request #387 from timowenz/main

docs: updated HomeContent.js to German language.

Author: ChrisB9

src/components/Layout/HomeContent.js

@@ -160,76 +160,78 @@ export function HomeContent() {
 
         <Section background="left-card">
           <Center>
-            <Header>Create user interfaces from components</Header>
+            <Header>Erstellen von Benutzeroberflächen aus Komponenten</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 lässt dich Benutzeroberflächen aus einzelnen Komponenten
+              erstellen. Erstelle deine eigenen React-Komponenten wie zum
+              Beispiel <Code>Thumbnail</Code>, <Code>LikeButton</Code> und{' '}
+              <Code>Video</Code>. Dann kombiniere sie zu ganzen Screens, Seiten,
+              und Anwendungen.
             </Para>
           </Center>
           <FullBleed>
             <Example1 />
           </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.
+              Ob du alleine arbeitest oder mit tausenden anderen Entwicklern,
+              das Arbeiten mit React fühlt sich gleich an. Es ist so konzipiert,
+              dass du Komponenten, die von unabhängigen Personen, Teams und
+              Organisationen geschrieben wurden, nahtlos kombinieren kannst.
             </Para>
           </Center>
         </Section>
 
         <Section background="right-card">
           <Center>
-            <Header>Write components with code and markup</Header>
+            <Header>Schreibe Komponenten mit Code und 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.
+              React-Komponenten sind JavaScript-Funktionen. Möchtest du Inhalte
+              bedingt anzeigen? Verwende eine <Code>if</Code>-Anweisung.
+              Möchtest du eine Liste anzeigen? Probiere es mit 
+              <Code>map()</Code>. React lernen ist Programmieren lernen.
             </Para>
           </Center>
           <FullBleed>
             <Example2 />
           </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.
+              Diese Syntax wird JSX genannt. Sie ist eine
+              JavaScript-Syntax-Erweiterung, die durch React populär wurde.
+              Durch die Nähe von JSX-Markup zur zugehörigen Rendering-Logik
+              lassen sich React-Komponenten einfach erstellen, pflegen und
+              löschen.
             </Para>
           </Center>
         </Section>
 
         <Section background="left-card">
           <Center>
-            <Header>Add interactivity wherever you need it</Header>
+            <Header>Füge Interaktivität hinzu, wo immer du sie brauchst</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.
+              React-Komponenten empfangen Daten und geben zurück, was auf dem
+              Bildschirm erscheinen soll. Du kannst ihnen neue Daten als
+              Reaktion auf eine Interaktion übergeben, zum Beispiel, wenn der
+              Benutzer etwas eingibt. React wird den Bildschirm aktualisieren,
+              um die neuen Daten anzupassen.
             </Para>
           </Center>
           <FullBleed>
             <Example3 />
           </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.
+              Du musst nicht deine ganze Seite in React erstellen. Füge React zu
+              deiner vorhandenen HTML-Seite hinzu und rendere interaktive
+              React-Komponenten überall darauf.
             </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
+                Füge React zu deiner Seite hinzu
               </CTA>
             </div>
           </Center>
@@ -238,14 +240,16 @@ export function HomeContent() {
         <Section background="right-card">
           <Center>
             <Header>
-              Go full-stack <br className="hidden lg:inline" />
-              with a framework
+              Mache Full-Stack <br className="hidden lg:inline" />
+              Mit einem Framework
             </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 ist eine Bibliothek. Sie ermöglicht es, Komponenten
+              zusammenzufügen, schreibt aber nicht vor, wie Routing und das
+              Abrufen von Daten implementiert werden sollen. Um eine gesamte App
+              mit React zu erstellen, empfehlen wir ein Full-Stack
+              React-Framework wie zum Beispiel{' '}
+              <Link href="https://nextjs.org">Next.js</Link> oder {' '}
               <Link href="https://remix.run">Remix</Link>.
             </Para>
           </Center>
@@ -254,30 +258,32 @@ 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 ist auch eine Architektur. Frameworks, die sie
+              implementieren, ermöglichen es, Daten in asynchronen Komponenten
+              abzurufen, die auf dem Server oder sogar während des Builds
+              ausgeführt werden. Lese Daten aus einer Datei oder einer Datenbank
+              und gib sie an deine interaktiven Komponenten weiter.
             </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
+                Starte mit einem Framework
               </CTA>
             </div>
           </Center>
         </Section>
         <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>Benutze das Beste von jeder Plattform</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.
+                Benutzer lieben Web- und Native-Apps aus unterschiedlichen
+                Gründen. React ermöglicht es, sowohl Web-Apps als auch
+                Native-Apps mit den gleichen Fähigkeiten zu erstellen. Es stützt
+                sich auf die einzigartigen Stärken jeder Plattform, um ein
+                natives Gefühl auf jeder Plattform zu erzeugen.
               </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">
@@ -291,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
+                        Bleibe dem Web treu
                       </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.
+                        Menschen erwarten, dass die Seiten von Webanwendungen
+                        schnell geladen werden. Auf dem Server kannst du mit React
+                        mit dem Streaming von HTML beginnen, währendessen 
+                        Daten abrufen, und den verbleibenden Inhalt nach
+                        und nach auffüllen, bevor JavaScript-Code geladen wird.
+                        Auf dem Client kann React Standard-Web-APIs verwenden,
+                        um deine Benutzeroberfläche auch während des Renderings
+                        reaktionsfähig zu halten.
                       </p>
                     </div>
                   </div>
@@ -377,21 +385,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
+                          Wirklich nativ werden
                         </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.{' '}
+                          Benutzer erwarten, dass native Apps wie ihre Plattform
+                          aussehen und sich anfühlen.{' '}
                           <Link href="https://reactnative.dev">
                             React Native
                           </Link>{' '}
-                          and{' '}
+                          und{' '}
                           <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.
+                          ermöglichen es, Apps in React für Android, iOS und
+                          mehr zu erstellen. Sie sehen und fühlen sich nativ an,
+                          weil ihre Benutzeroberflächen <i>wirklich nativ</i>{' '}
+                          sind. Es ist keine Web-View - Deine React-Komponenten
+                          rendern echte Android- und iOS-Ansichten, die von der
+                          Plattform bereitgestellt werden.
                         </p>
                       </div>
                     </div>
@@ -401,14 +410,13 @@ 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.
+                Mit React kannst du ein Web- und ein Nativer-Entwickler sein.
+                Dein Team kann auf viele Plattformen ausliefern, ohne die
+                Benutzererfahrung zu beeinträchtigen.
               </Para>
               <div className="flex justify-start w-full lg:justify-center">
                 <CTA color="gray" icon="native" href="https://reactnative.dev/">
-                  Build for native platforms
+                  Erstellen für native Plattformen
                 </CTA>
               </div>
             </div>
@@ -419,31 +427,33 @@ 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:ps-5 lg:pe-10">
-                <Header>Upgrade when the future is ready</Header>
+                <Header>Upgrade, wenn die Zukunft bereit ist</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 geht sorgfältig mit Änderungen um. Jeder React-Commit
+                  wird auf geschäftskritischen Oberflächen mit über einer
+                  Milliarde Benutzern getestet. Über 100.000 React-Komponenten
+                  bei Meta sorgen dafür, dass jede Migrationsstrategie validiert
+                  wird.
                 </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.
+                    Das React Team forscht immer daran, wie React verbessert
+                    werden kann. Einige Forschungen dauern Jahre, um sich
+                    auszuzahlen. React hat eine hohe Messlatte, um eine
+                    Forschungsidee in die Produktion zu übernehmen. Nur bewährte
+                    Ansätze werden Teil von React.
                   </Para>
                   <div className="hidden lg:flex justify-start w-full">
                     <CTA color="gray" icon="news" href="/blog">
-                      Read more React news
+                      Mehr React-Neuigkeiten
                     </CTA>
                   </div>
                 </div>
               </div>
               <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
+                  Aktuelle React-Neuigkeiten
                 </p>
                 <div className="flex-col sm:flex-row flex-wrap flex gap-5 text-start my-5">
                   <div className="flex-1 min-w-[40%] text-start">
@@ -461,7 +471,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
+                    Mehr React-Neuigkeiten
                   </CTA>
                 </div>
               </div>
@@ -474,27 +484,30 @@ 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
+                  Trete einer Community <br className="hidden lg:inline" />
+                  von Millionen bei
                 </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.
+                  Du bist nicht alleine. Zwei Millionen Entwickler aus der
+                  ganzen Welt besuchen jeden Monat die React-Dokumentation.
+                  React ist etwas, auf das sich Menschen und Teams einigen und
+                  verlassen können.
                 </Para>
               </Center>
             </div>
             <CommunityGallery />
             <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.
+                  Das ist der Grund, warum React mehr als eine Bibliothek, eine
+                  Architektur oder sogar ein Ökosystem ist. React ist eine
+                  Community. Es ist ein Ort, an dem du um Hilfe bitten,
+                  Möglichkeiten finden und neue Freunde treffen kannst. Du wirst
+                  sowohl Entwickler als auch Designer, Anfänger und Experten,
+                  Forscher und Künstler, Lehrer und Schüler treffen. Unsere
+                  Hintergründe können sehr unterschiedlich sein, aber React
+                  ermöglicht es uns allen, gemeinsam Benutzeroberflächen zu
+                  erstellen.
                 </Para>
               </Center>
             </div>
@@ -511,15 +524,15 @@ export function HomeContent() {
             </div>
             <Logo className="uwu-hidden text-brand dark:text-brand-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="hidden lg:inline" />
-              React community
+              Willkommen in der <br className="hidden lg:inline" />
+              React-Community
             </Header>
             <ButtonLink
               href={'/learn'}
               type="primary"
               size="lg"
               label="Take the Tutorial">
-              Get Started
+              Lege los
             </ButtonLink>
           </div>
         </Section>