From 5f27c2342e71e4ffe60ade7392743ad5abfdf186 Mon Sep 17 00:00:00 2001
From: wbglaeser <ben.glaeser@tuta.io>
Date: Thu, 7 Nov 2024 16:55:52 +0100
Subject: [PATCH] update basics box

---
 src/language/translations.js                  | 15 ++--
 .../feedback/components/FeedbackBox.js        |  3 +-
 .../components/LandingPageBasics.js           | 71 +++++++++----------
 3 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/src/language/translations.js b/src/language/translations.js
index 779f540..6de87a5 100644
--- a/src/language/translations.js
+++ b/src/language/translations.js
@@ -230,20 +230,19 @@ const translations = {
                 manyMore: "Viele Weitere",
             },
             mission: {
-                header: "1 von 5 Haushalten in Deutschland beanspruchen keine Sozialleistungen, auf die sie Anspruch haben.",
-                text: "Wir haben es uns zur Aufgabe gemacht, Sozialleistungen in Deutschland für alle zugänglich und leicht verständlich zu machen. Wir zeigen dir, auf welche Sozialleistungen du Anspruch haben könntest und weisen dir den Weg zur Antragstellung."
+                header: "1 von 5 Haushalten in Deutschland beanspruchen nicht die Sozialleistungen, auf die sie Anspruch haben.",
+                text: "Mit Förderfunke möchten wir erreichen, dass Sozialleistungen in Deutschland für alle zugänglich und leicht verständlich sind. Wir zeigen dir, auf welche Sozialleistungen du Anspruch haben könntest und wie du sie beantragen kannst."
             },
             howItWorks: {
                 header: "So geht's",
-                part1Header: "Beantworte ein paar grundlegende Fragen",
-                part1Text: "Mach einen schnellen Check, erstelle dein Profil oder durchsuche unsere Liste der Sozialleistungen nach Themen. Deine Wahl.",
+                part1Header: "Beantworte ein paar Fragen zu deiner Lebenssituation",
+                part1Text: "Damit erstellst du ein Profil, das mit den Anforderungsbedingungen der unterschiedlichen Leistungen verglichen wird.",
                 part2Header: "Erhalte eine Liste deiner potenziellen Leistungen",
-                part2Text: "Je vollständiger dein Profil ist, desto genauer wird die Liste der Leistungen sein, die du erhältst.",
-                part3Header: "Erfahre mehr über relevante Leistungen",
-                part3Text: "Erfahre mehr über die Voraussetzungen und notwendigen Schritte, um deine Leistungen zu beantragen."
+                part2Text: "Je vollständiger dein Profil ist, desto mehr Leistungen können auf Anspruch überprüft werden.",
+                part3Header: "Finde Informationen zu Leistungen und Antragsverfahren",
+                part3Text: "In der Detailansicht kannst du dich genauer über eine Leistung informieren. Du erfährst, zum Bespiel, warum du möglichweise Anspruch hast oder nicht."
             },
             theBasics: {
-                header: "Die Grundlagen",
                 line1: "FörderFunke ist kostenlos nutzbar",
                 line2: "Deine Daten gehören dir! Alle Informationen, die du eingibst, werden nur lokal auf deinem Gerät gespeichert",
                 line3: "Keine Registrierung, kein Login erforderlich",
diff --git a/src/screens/landing-page/sections/feedback/components/FeedbackBox.js b/src/screens/landing-page/sections/feedback/components/FeedbackBox.js
index f48bac6..480695b 100644
--- a/src/screens/landing-page/sections/feedback/components/FeedbackBox.js
+++ b/src/screens/landing-page/sections/feedback/components/FeedbackBox.js
@@ -75,8 +75,7 @@ const styles = {
         borderRadius: '12px',
         borderStyle: 'solid',
         borderWidth: '1px',
-        borderColor: globalStyles.primaryColor,
-        boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.15)',
+        borderColor: globalStyles.primaryColor
     },
     text: {
         fontSize: '20px',
diff --git a/src/screens/landing-page/sections/how-it-works/components/LandingPageBasics.js b/src/screens/landing-page/sections/how-it-works/components/LandingPageBasics.js
index 1bcca62..277c6da 100644
--- a/src/screens/landing-page/sections/how-it-works/components/LandingPageBasics.js
+++ b/src/screens/landing-page/sections/how-it-works/components/LandingPageBasics.js
@@ -7,54 +7,48 @@ import globalStyles from "../../../../../styles/styles";
 import useTranslation from "../../../../../language/useTranslation";
 
 const LandingPageBasics = () => {
-    const { t } = useTranslation();
+    const {t} = useTranslation();
 
     return (
         <VStack alignItems={'center'} sx={{width: "100%"}}>
-            <VStack
-                alignItems={'center'}
-                sx={{
-                    backgroundColor: globalStyles.primaryColor,
-                    padding: '32px',
-                    borderRadius: '15px',
-                }}>
-                <HStack>
-                    <Typography sx={styles.titleText}>
-                        {t('home.theBasics.header')}
+            <VStack gap={4} alignItems={'flex-start'} sx={styles.basicsBox}>
+                <HStack alignItems={'center'}>
+                    <CheckCircleIcon sx={styles.icon}/>
+                    <Typography sx={styles.itemText}>
+                        {t('home.theBasics.line1')}
+                    </Typography>
+                </HStack>
+                <HStack alignItems={'center'}>
+                    <CheckCircleIcon sx={styles.icon}/>
+                    <Typography sx={styles.itemText}>
+                        {t('home.theBasics.line2')}
+                    </Typography>
+                </HStack>
+                <HStack alignItems={'center'}>
+                    <CheckCircleIcon sx={styles.icon}/>
+                    <Typography sx={styles.itemText}>
+                        {t('home.theBasics.line3')}
+                    </Typography>
+                </HStack>
+                <HStack alignItems={'center'}>
+                    <CheckCircleIcon sx={styles.icon}/>
+                    <Typography sx={styles.itemText}>
+                        {t('home.theBasics.line4')}
                     </Typography>
                 </HStack>
-                <VStack>
-                    <HStack alignItems={'center'}>
-                        <CheckCircleIcon sx={styles.icon}/>
-                        <Typography sx={styles.itemText}>
-                            {t('home.theBasics.line1')}
-                        </Typography>
-                    </HStack>
-                    <HStack alignItems={'center'}>
-                        <CheckCircleIcon sx={styles.icon}/>
-                        <Typography sx={styles.itemText}>
-                            {t('home.theBasics.line2')}
-                        </Typography>
-                    </HStack>
-                    <HStack alignItems={'center'}>
-                        <CheckCircleIcon sx={styles.icon}/>
-                        <Typography sx={styles.itemText}>
-                            {t('home.theBasics.line3')}
-                        </Typography>
-                    </HStack>
-                    <HStack alignItems={'center'}>
-                        <CheckCircleIcon sx={styles.icon}/>
-                        <Typography sx={styles.itemText}>
-                            {t('home.theBasics.line4')}
-                        </Typography>
-                    </HStack>
-                </VStack>
             </VStack>
         </VStack>
     );
 }
 
 const styles = {
+    basicsBox: {
+        borderRadius: '12px',
+        borderStyle: 'solid',
+        borderWidth: '1px',
+        borderColor: globalStyles.primaryColor,
+        padding: '32px',
+    },
     titleText: {
         fontWeight: 'bold',
         fontSize: '28px'
@@ -64,7 +58,8 @@ const styles = {
         fontSize: '34px',
     },
     itemText: {
-        fontSize: '20px'
+        fontSize: '20px',
+        maxWidth: '400px'
     }
 }