From 6655c47c1531afa4fbae0969a8dd1cf4f5300a71 Mon Sep 17 00:00:00 2001
From: Timo Wenz <2025014@stud.hs-mannheim.de>
Date: Thu, 18 Jul 2024 22:44:30 +0200
Subject: [PATCH 1/8] docs: updated HomeContent.js to German language.

---
 src/components/Layout/HomeContent.js | 206 ++++++++++++++-------------
 1 file changed, 109 insertions(+), 97 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index d8be50f1b..93779d94f 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -160,13 +160,13 @@ export function HomeContent() {
 
         <Section background="left-card">
           <Center>
-            <Header>Create user interfaces from components</Header>
+            <Header>Erstelle Benutzeroberflächen von 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>. Kombiniere sie dann zu ganzen Bildschirmen,
+              Seiten und Apps.
             </Para>
           </Center>
           <FullBleed>
@@ -174,22 +174,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.
+              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>. Das Erlernen von React ist das Erlernen von
+              programmieren.
             </Para>
           </Center>
           <FullBleed>
@@ -197,22 +198,23 @@ 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.
+              Die Syntax von JSX ist eine JavaScript-Syntaxerweiterung, die von
+              React populär gemacht wurde. Das Platzieren von JSX-Markup in der
+              Nähe der zugehörigen Rendering-Logik macht React-Komponenten
+              einfach zu erstellen, zu pflegen und zu 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 übergeben
+              als Reaktion auf eine Interaktion wie wenn der Benutzer in ein
+              Eingabefeld tippt. React wird den Bildschirm aktualisieren, um den
+              neuen Daten zu entsprechen.
             </Para>
           </Center>
           <FullBleed>
@@ -220,16 +222,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.
+              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>
@@ -237,16 +239,14 @@ export function HomeContent() {
 
         <Section background="right-card">
           <Center>
-            <Header>
-              Go full-stack <br className="hidden lg:inline" />
-              with a framework
-            </Header>
+            <Header>Full-Stack Frameworks erhältlich</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{' '}
-              <Link href="https://remix.run">Remix</Link>.
+              React ist eine Bibliothek. Sie ermöglicht es, Komponenten
+              zusammenzufügen, schreibt aber nicht vor, wie Routing und
+              Datenabruf 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>
           <FullBleed>
@@ -254,17 +254,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 ist auch eine Architektur. Frameworks, die es
+              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
+                Steige mit einem Framework ein
               </CTA>
             </div>
           </Center>
@@ -272,12 +273,13 @@ 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>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 +293,16 @@ 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.
+                        Benutzer erwarten, dass Web-App-Seiten schnell laden.
+                        Mit React kannst du auf dem Server HTML streamen,
+                        während noch Daten abgerufen werden, und allmählich den
+                        restlichen Inhalt laden, bevor JavaScript-Code geladen
+                        wird. Auf dem Client kann React Standard-Web-APIs
+                        verwenden, um Benutzeroberfläche auch mitten im Rendern
+                        reaktionsschnell zu halten.
                       </p>
                     </div>
                   </div>
@@ -377,21 +380,26 @@ 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
+                          Erlebe das wahre Nativ
                         </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
+                            {' '}
+                            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.
+                          und{' '}
+                          <Link href="https://github.com/expo/expo">
+                            {' '}
+                            Expo{' '}
+                          </Link>
+                          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 wirklich nativ sind. Es
+                          ist kein Web-View - Ihre React-Komponenten rendern
+                          echte Android- und iOS-Ansichten, die von der
+                          Plattform bereitgestellt werden.
                         </p>
                       </div>
                     </div>
@@ -401,14 +409,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 Native-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
+                  Erstelle native Plattformen
                 </CTA>
               </div>
             </div>
@@ -419,23 +426,25 @@ 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>Aktualisiere 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 Hürde, 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>
@@ -443,7 +452,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
+                  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 +470,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,13 +483,14 @@ 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>
@@ -488,13 +498,15 @@ 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.
+                  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 +523,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>

From 6031e5310e0013e8cf66e056261e2d9037cc715c Mon Sep 17 00:00:00 2001
From: Timo Wenz <86304640+timowenz@users.noreply.github.com>
Date: Sun, 13 Oct 2024 16:30:41 +0000
Subject: [PATCH 2/8] fix: Requested changes implemented.

---
 src/components/Layout/HomeContent.js | 82 +++++++++++++++-------------
 1 file changed, 44 insertions(+), 38 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 93779d94f..a65e4392f 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -160,13 +160,13 @@ export function HomeContent() {
 
         <Section background="left-card">
           <Center>
-            <Header>Erstelle Benutzeroberflächen von Komponenten.</Header>
+            <Header>Erstellen von Benutzeroberflächen aus Komponenten.</Header>
             <Para>
               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>. Kombiniere sie dann zu ganzen Bildschirmen,
-              Seiten und Apps.
+              <Code>Video</Code>. Dann kombinieren Sie sie zu ganzen Screens,
+              Seiten, und Anwendungen.
             </Para>
           </Center>
           <FullBleed>
@@ -189,8 +189,7 @@ export function HomeContent() {
               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>. Das Erlernen von React ist das Erlernen von
-              programmieren.
+              <Code>map()</Code>. React lernen ist Programmieren lernen.
             </Para>
           </Center>
           <FullBleed>
@@ -198,10 +197,11 @@ export function HomeContent() {
           </FullBleed>
           <Center>
             <Para>
-              Die Syntax von JSX ist eine JavaScript-Syntaxerweiterung, die von
-              React populär gemacht wurde. Das Platzieren von JSX-Markup in der
-              Nähe der zugehörigen Rendering-Logik macht React-Komponenten
-              einfach zu erstellen, zu pflegen und zu löschen.
+              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>
@@ -211,11 +211,11 @@ export function HomeContent() {
             <Header>Füge Interaktivität hinzu, wo immer du sie brauchst</Header>
             <Para>
               React-Komponenten empfangen Daten und geben zurück, was auf dem
-              Bildschirm erscheinen soll. Du kannst ihnen neue Daten übergeben
-              als Reaktion auf eine Interaktion wie wenn der Benutzer in ein
-              Eingabefeld tippt. React wird den Bildschirm aktualisieren, um den
-              neuen Daten zu entsprechen.
-            </Para>
+              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 />
@@ -239,14 +239,18 @@ export function HomeContent() {
 
         <Section background="right-card">
           <Center>
-            <Header>Full-Stack Frameworks erhältlich</Header>
+            <Header>
+              Mache Full-Stack <br className="hidden lg:inline" />
+              Mit einem Framework
+            </Header>
             <Para>
               React ist eine Bibliothek. Sie ermöglicht es, Komponenten
-              zusammenzufügen, schreibt aber nicht vor, wie Routing und
-              Datenabruf 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>.
+              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 oder{' '}
+              <Link href="https://remix.run">Remix</Link>.
             </Para>
           </Center>
           <FullBleed>
@@ -265,7 +269,7 @@ export function HomeContent() {
                 color="gray"
                 icon="framework"
                 href="/learn/start-a-new-react-project">
-                Steige mit einem Framework ein
+                Starte mit einem Framework
               </CTA>
             </div>
           </Center>
@@ -296,13 +300,14 @@ export function HomeContent() {
                         Bleibe dem Web treu
                       </h4>
                       <p className="lg:text-xl leading-normal text-secondary">
-                        Benutzer erwarten, dass Web-App-Seiten schnell laden.
-                        Mit React kannst du auf dem Server HTML streamen,
-                        während noch Daten abgerufen werden, und allmählich den
-                        restlichen Inhalt laden, bevor JavaScript-Code geladen
-                        wird. Auf dem Client kann React Standard-Web-APIs
-                        verwenden, um Benutzeroberfläche auch mitten im Rendern
-                        reaktionsschnell zu halten.
+                        Menschen erwarten, dass die Seiten von Webanwendungen
+                        schnell geladen werden. Auf dem Server kannst du mit
+                        React mit dem Streaming von HTML beginnen, während du
+                        noch 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 Ihre Benutzeroberfläche auch während des Renderings
+                        reaktionsfähig zu halten.
                       </p>
                     </div>
                   </div>
@@ -380,14 +385,13 @@ 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">
-                          Erlebe das wahre Nativ
+                          Wirklich nativ werden
                         </h4>
                         <p className="h-full lg:text-xl text-secondary dark:text-secondary-dark leading-normal">
                           Benutzer erwarten, dass native Apps wie ihre Plattform
                           aussehen und sich anfühlen.{' '}
                           <Link href="https://reactnative.dev">
-                            {' '}
-                            React Native{' '}
+                            React Native
                           </Link>{' '}
                           und{' '}
                           <Link href="https://github.com/expo/expo">
@@ -396,9 +400,11 @@ export function HomeContent() {
                           </Link>
                           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 wirklich nativ sind. Es
-                          ist kein Web-View - Ihre React-Komponenten rendern
-                          echte Android- und iOS-Ansichten, die von der
+                          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>
@@ -415,7 +421,7 @@ export function HomeContent() {
               </Para>
               <div className="flex justify-start w-full lg:justify-center">
                 <CTA color="gray" icon="native" href="https://reactnative.dev/">
-                  Erstelle native Plattformen
+                  Erstellen für native Plattformen
                 </CTA>
               </div>
             </div>
@@ -426,19 +432,19 @@ 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>Aktualisiere wenn die Zukunft bereit ist</Header>
+                <Header>Upgrade, wenn die Zukunft bereit ist</Header>
                 <Para>
                   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
+                  bei Meta sorgen dafür, dass jede Migrationsstrategie validiert
                   wird.
                 </Para>
                 <div className="order-last pt-5">
                   <Para>
                     Das React Team forscht immer daran, wie React verbessert
                     werden kann. Einige Forschungen dauern Jahre, um sich
-                    auszuzahlen. React hat eine hohe Hürde, um eine
+                    auszuzahlen. React hat eine hohe Messlatte, um eine
                     Forschungsidee in die Produktion zu übernehmen. Nur bewährte
                     Ansätze werden Teil von React.
                   </Para>

From 2ad50310600222b1f824583383e8acaf8b29d85d Mon Sep 17 00:00:00 2001
From: Timo Wenz <86304640+timowenz@users.noreply.github.com>
Date: Tue, 4 Feb 2025 15:41:52 +0100
Subject: [PATCH 3/8] Apply suggestions from code review

Co-authored-by: Phil <me@ph1p.dev>
---
 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 a65e4392f..048ae426f 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -160,12 +160,12 @@ export function HomeContent() {
 
         <Section background="left-card">
           <Center>
-            <Header>Erstellen von Benutzeroberflächen aus Komponenten.</Header>
+            <Header>Erstellen von Benutzeroberflächen aus Komponenten</Header>
             <Para>
               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 kombinieren Sie sie zu ganzen Screens,
+              <Code>Video</Code>. Dann kombiniere sie zu ganzen Screens,
               Seiten, und Anwendungen.
             </Para>
           </Center>
@@ -258,7 +258,7 @@ export function HomeContent() {
           </FullBleed>
           <Center>
             <Para>
-              React ist auch eine Architektur. Frameworks, die es
+              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
@@ -415,7 +415,7 @@ 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>
-                Mit React kannst du ein Web- und ein Native-Entwickler sein.
+                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>

From 7427d6160e4179ac39d0549f47ed5397bbc6b41e Mon Sep 17 00:00:00 2001
From: Timo Wenz <86304640+timowenz@users.noreply.github.com>
Date: Tue, 4 Feb 2025 14:47:37 +0000
Subject: [PATCH 4/8] fix: formatting

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

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 048ae426f..a87d1d0a8 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -165,8 +165,8 @@ export function HomeContent() {
               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.
+              <Code>Video</Code>. Dann kombiniere sie zu ganzen Screens, Seiten,
+              und Anwendungen.
             </Para>
           </Center>
           <FullBleed>
@@ -394,15 +394,10 @@ export function HomeContent() {
                             React Native
                           </Link>{' '}
                           und{' '}
-                          <Link href="https://github.com/expo/expo">
-                            {' '}
-                            Expo{' '}
-                          </Link>
+                          <Link href="https://github.com/expo/expo">Expo</Link>{' '}
                           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>{' '}
+                          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.

From 762d947fb7a4af80134fc7d387b451d3f6cd8aa9 Mon Sep 17 00:00:00 2001
From: Timo Wenz <86304640+timowenz@users.noreply.github.com>
Date: Thu, 6 Feb 2025 08:21:13 +0100
Subject: [PATCH 5/8] Update src/components/Layout/HomeContent.js

Co-authored-by: Phil <me@ph1p.dev>
---
 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 a87d1d0a8..8eb0cc1bb 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -301,12 +301,12 @@ export function HomeContent() {
                       </h4>
                       <p className="lg:text-xl leading-normal text-secondary">
                         Menschen erwarten, dass die Seiten von Webanwendungen
-                        schnell geladen werden. Auf dem Server kannst du mit
-                        React mit dem Streaming von HTML beginnen, während du
-                        noch Daten abrufen, und den verbleibenden Inhalt nach
+                        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 Ihre Benutzeroberfläche auch während des Renderings
+                        um deine Benutzeroberfläche auch während des Renderings
                         reaktionsfähig zu halten.
                       </p>
                     </div>

From 61ee489c440476fc860cc1fc4f1853455f9487b6 Mon Sep 17 00:00:00 2001
From: Timo Wenz <86304640+timowenz@users.noreply.github.com>
Date: Sun, 9 Mar 2025 14:17:42 +0100
Subject: [PATCH 6/8] Update src/components/Layout/HomeContent.js

Co-authored-by: Christian Rodriguez Benthake <chris.ben9@gmail.com>
---
 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 8eb0cc1bb..b09208b08 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -188,7 +188,7 @@ export function HomeContent() {
             <Para>
               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{' '}
+              Möchtest du eine Liste anzeigen? Probiere es mit 
               <Code>map()</Code>. React lernen ist Programmieren lernen.
             </Para>
           </Center>

From afb58e043930e09ef97d8901472a26390b27dfa2 Mon Sep 17 00:00:00 2001
From: Timo Wenz <86304640+timowenz@users.noreply.github.com>
Date: Sun, 9 Mar 2025 14:17:50 +0100
Subject: [PATCH 7/8] Update src/components/Layout/HomeContent.js

Co-authored-by: Christian Rodriguez Benthake <chris.ben9@gmail.com>
---
 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 b09208b08..f4ffc8c06 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -215,7 +215,7 @@ export function HomeContent() {
               Reaktion auf eine Interaktion übergeben, zum Beispiel, wenn der
               Benutzer etwas eingibt. React wird den Bildschirm aktualisieren,
               um die neuen Daten anzupassen.
-            </Para>{' '}
+            </Para>
           </Center>
           <FullBleed>
             <Example3 />

From ebeab583bfd7f0009086739277ea21f72490a974 Mon Sep 17 00:00:00 2001
From: Timo Wenz <86304640+timowenz@users.noreply.github.com>
Date: Sun, 9 Mar 2025 14:17:55 +0100
Subject: [PATCH 8/8] Update src/components/Layout/HomeContent.js

Co-authored-by: Christian Rodriguez Benthake <chris.ben9@gmail.com>
---
 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 f4ffc8c06..01c958479 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -249,7 +249,7 @@ export function HomeContent() {
               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 oder{' '}
+              <Link href="https://nextjs.org">Next.js</Link> oder {' '}
               <Link href="https://remix.run">Remix</Link>.
             </Para>
           </Center>