Add remaining landing page translations

src/language/translations.js

@@ -17,7 +17,62 @@ const translations = {
             housingBenefit: "Housing benefit",
             citizensBenefit: "Citizen's benefit",
             vocationalTrainingAllowance: "Vocational training allowance",
-            manyMore: "Many more",
+            manyMore: "Many more"
+        },
+        mission: {
+            header: "1 out of 5 households in Germany don't claim social benefits they are entitled to.",
+            text: "We are on a mission to make social benefits in Germany accessible and easy to understand by everyone. We show you what social benefits you might be eligible for and point you the way to apply for them."
+        },
+        howItWorks: {
+            header: "How it works",
+            part1Header: "Answer some basic questions",
+            part1Text: "Do a quick check, create your profile, or browse our list of social benefits by topic. Your choice.",
+            part2Header: "Get your potential benefits listed",
+            part2Text: "The more complete your profile is, the more accurate the list of benefits you get.",
+            part3Header: "Learn about relevant benefits",
+            part3Text: "Learn about requirements and necessary steps to apply for you benefits.",
+        },
+        theBasics: {
+            header: "The basics",
+            line1: "FörderFunke is free to use",
+            line2: "Your data is yours! All the information you fill in is stored only locally on your device",
+            line3: "No registration, no login needed",
+            line4: "You can use it on the phone or laptop"
+        },
+        feedback: {
+            header: "Help us improve",
+            text: "Your feedback is essential for us to understand how we can improve your experience with the application. It helps us improve and add features that allow people to find the right benefits.",
+            ratePrompt: "How do you rate your overall experience with FörderFunke?",
+            1: "Worst",
+            2: "Poor",
+            3: "Fine",
+            4: "Good",
+            5: "Great",
+            writePrompt: "If you like you can also write us a few lines.",
+            placeholder: "Enter your text",
+            submitting: "Submitting...",
+            submitBtn: "Submit"
+        },
+        collaborate: {
+            header: "Let's collaborate",
+            text: "Do you know about some benefits or funding schemes that we are still missing? We would be really happy to collaborate and include them in the catalogue. We are also very interested to learn about user groups that could benefit from FörderFunke.",
+            messagePrompt: "Send us a message. We will get back to you as quickly as we can!"
+        },
+        principles: {
+            header: "Our principles",
+            part1Header: "Privacy By Design",
+            part1Text: "It is important to us that you maintain control over your data. That's why your data remains on your end device.",
+            part2Header: "Open Data",
+            part2Text: "Important information for citizens about their benefits is all too often difficult to find. We make our catalogue of conditions for social benefits publicly available.",
+            part3Header: "User Centric Design",
+            part3Text: "We work in a user-centered and iterative way. We talk with users and constantly improve our product so that it is easy to use, understandable and accessible.",
+        },
+        connect: {
+            header: "Let's connect",
+        },
+        supportedBy: {
+            header: "Supported by",
+            text: "We were part of the 15th round of the Prototype Fund from March to September 2024. Förderkennzeichen: 01IS24S19."
         }
     },
     de: {
@@ -40,6 +95,61 @@ const translations = {
             vocationalTrainingAllowance: "Berufsausbildungsbeihilfe",
             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."
+        },
+        howItWorks: {
+            header: "Wie es funktioniert",
+            part1Header: "Beantworte ein paar grundlegende Fragen",
+            part1Text: "Mach einen schnellen Check, erstelle dein Profil oder durchsuche unsere Liste der Sozialleistungen nach Themen. Deine Wahl.",
+            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."
+        },
+        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",
+            line4: "Du kannst es auf dem Handy oder Laptop nutzen"
+        },
+        feedback: {
+            header: "Hilf uns, besser zu werden",
+            text: "Dein Feedback ist entscheidend für uns, um zu verstehen, wie wir deine Erfahrung mit der Anwendung verbessern können. Es hilft uns, Funktionen hinzuzufügen und zu optimieren, damit Menschen die richtigen Leistungen finden können.",
+            ratePrompt: "Wie bewertest du deine allgemeine Erfahrung mit FörderFunke?",
+            1: "Schlecht",
+            2: "Mangelhaft",
+            3: "In Ordnung",
+            4: "Gut",
+            5: "Großartig",
+            writePrompt: "Wenn du möchtest, kannst du uns auch ein paar Zeilen schreiben.",
+            placeholder: "Gib deinen Text ein",
+            submitting: "Wird gesendet...",
+            submitBtn: "Absenden"
+        },
+        collaborate: {
+            header: "Lass uns zusammenarbeiten",
+            text: "Kennst du Sozialleistungen oder Förderprogramme, die wir noch nicht erfasst haben? Wir würden uns sehr freuen, mit dir zusammenzuarbeiten und sie in unseren Katalog aufzunehmen. Wir sind auch sehr daran interessiert, mehr über Nutzergruppen zu erfahren, die von FörderFunke profitieren könnten.",
+            messagePrompt: "Schick uns eine Nachricht. Wir melden uns so schnell wie möglich zurück!"
+        },
+        principles: {
+            header: "Unsere Prinzipien",
+            part1Header: "Datenschutz durch Design",
+            part1Text: "Es ist uns wichtig, dass du die Kontrolle über deine Daten behältst. Deshalb bleiben deine Daten auf deinem Endgerät.",
+            part2Header: "Offene Daten",
+            part2Text: "Wichtige Informationen für Bürger über ihre Leistungen sind allzu oft schwer zu finden. Wir machen unseren Katalog der Bedingungen für Sozialleistungen öffentlich zugänglich.",
+            part3Header: "Nutzerzentriertes Design",
+            part3Text: "Wir arbeiten nutzerzentriert und iterativ. Wir sprechen mit Nutzern und verbessern unser Produkt ständig, damit es einfach zu bedienen, verständlich und zugänglich ist."
+        },
+        connect: {
+            header: "Lass uns vernetzen",
+        },
+        supportedBy: {
+            header: "Unterstützt von",
+            text: "Wir waren Teil der 15. Runde des Prototype Fund von März bis September 2024. Förderkennzeichen: 01IS24S19."
+        }
     },
 };
 

src/screens/landing-page/sections/LandingPageFact.js

@@ -5,20 +5,20 @@ import globalStyles from "../../../styles/styles";
 import LandingPageSectionWrapper from "../components/LandingPageSectionWrapper";
 import VStack from "../../../components/VStack";
 import LandingPageSectionGrid from "../components/LandingPageSectionGrid";
+import useTranslation from "../../../language/useTranslation";
 
 const LandingPageFact = ({isDesktop}) => {
+    const { t } = useTranslation();
+
     return (
         <LandingPageSectionWrapper backgroundColor={globalStyles.primaryColor} isDesktop={isDesktop}>
             <LandingPageSectionGrid>
                 <VStack alignItems={'center'}>
                     <HStack>
-                        <Typography sx={styles.headerSectionTitle}>1 out of 5 households in Germany don’t claim
-                            social benefits they are entitled to.</Typography>
+                        <Typography sx={styles.headerSectionTitle}>{t('mission.header')}</Typography>
                     </HStack>
                     <HStack>
-                        <Typography sx={styles.headerSectionText}>We are on a mission to make social benefits in Germany
-                            accessible and easy to understand by everyone. We show you what social benefits you might be
-                            eligible for and point you the way to apply for them. </Typography>
+                        <Typography sx={styles.headerSectionText}>{t('mission.text')}</Typography>
                     </HStack>
                 </VStack>
             </LandingPageSectionGrid>

src/screens/landing-page/sections/collaboration/LandingPageCollaboration.js

@@ -3,15 +3,16 @@ import {Typography} from "@mui/material";
 import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
 import CollaborationBox from "./components/CollaborationBox";
 import LandingPageSectionGrid from "../../components/LandingPageSectionGrid";
+import useTranslation from "../../../../language/useTranslation";
 
 const LandingPageCollaboration = ({isDesktop}) => {
+    const { t } = useTranslation();
+
     return (
         <LandingPageSectionWrapper isDesktop={isDesktop}>
-            <LandingPageSectionGrid title={'Let\'s collaborate'}>
+            <LandingPageSectionGrid title={t('collaborate.header')}>
                 <Typography sx={styles.text}>
-                    Do you know about some benefits or funding schemes that we are still missing? We would be really
-                    happy to collaborate and include them in the catalogue. We are also very interested to learn
-                    about user groups that could benefit from FörderFunke.
+                    {t('collaborate.text')}
                 </Typography>
                 <CollaborationBox isDesktop={isDesktop}/>
             </LandingPageSectionGrid>

src/screens/landing-page/sections/collaboration/components/CollaborationBox.js

@@ -4,14 +4,16 @@ import VStack from "../../../../../components/VStack";
 import globalStyles from "../../../../../styles/styles";
 import HStack from "../../../../../components/HStack";
 import EmailIcon from "@mui/icons-material/Email";
+import useTranslation from "../../../../../language/useTranslation";
 
 const CollaborationBox = () => {
+    const { t } = useTranslation();
 
     return (
         <VStack gap={5} sx={styles.collaborationBox}>
             <VStack gap={3} alignItems={'center'} sx={{width: "100%"}}>
                 <Typography sx={styles.text}>
-                    Send us a message. We will get back to you as quickly as we can!
+                    {t('collaborate.messagePrompt')}
                 </Typography>
                 <HStack>
                     <HStack alignItems={'center'} sx={styles.email}>

src/screens/landing-page/sections/feedback/LandingPageFeedback.js

@@ -3,14 +3,16 @@ import {Typography} from "@mui/material";
 import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
 import FeedbackBox from "./components/FeedbackBox";
 import LandingPageSectionGrid from "../../components/LandingPageSectionGrid";
+import useTranslation from "../../../../language/useTranslation";
 
 const LandingPageFeedback = ({isDesktop}) => {
+    const { t } = useTranslation();
+
     return (
         <LandingPageSectionWrapper isDesktop={isDesktop}>
-            <LandingPageSectionGrid title={'Help us improve'}>
+            <LandingPageSectionGrid title={t('feedback.header')}>
                 <Typography sx={styles.text}>
-                    Your feedback is essential for us to understand how we can improve your experience with the
-                    application. It helps us improve and add features that allow people to find the right benefits.
+                    {t('feedback.text')}
                 </Typography>
                 <FeedbackBox isDesktop={isDesktop}/>
             </LandingPageSectionGrid>

src/screens/landing-page/sections/feedback/components/FeedbackBox.js

@@ -5,8 +5,10 @@ import FeedbackButtonArray from "./FeedbackButtonArray";
 import HStack from "../../../../../components/HStack";
 import globalStyles from "../../../../../styles/styles";
 import useFeedbackHandler from "../hooks/useFeedbackHandler";
+import useTranslation from "../../../../../language/useTranslation";
 
 const FeedbackBox = ({isDesktop}) => {
+    const { t } = useTranslation();
 
     const {
         feedbackText,
@@ -21,16 +23,17 @@ const FeedbackBox = ({isDesktop}) => {
         <VStack gap={5} sx={styles.feedbackBox}>
             <VStack gap={5} alignItems={'flex-start'} sx={{ width: "100%" }}>
                 <Typography sx={styles.text}>
-                    How do you rate your overall experience with FörderFunke?
+                    {t('feedback.ratePrompt')}
                 </Typography>
                 <FeedbackButtonArray isDesktop={isDesktop} setFeedbackValue={setFeedbackValue} />
             </VStack>
             <VStack gap={5}>
                 <Typography sx={styles.text}>
+                    {t('feedback.writePrompt')}
                     If you like you can also write us a few lines.
                 </Typography>
                 <TextField
-                    label="Enter your text"
+                    label={t('feedback.placeholder')}
                     multiline
                     variant="filled"
                     fullWidth
@@ -53,7 +56,7 @@ const FeedbackBox = ({isDesktop}) => {
                     onClick={submitFeedback}
                     disabled={isSubmitting}
                 >
-                    {isSubmitting ? "Submitting..." : "Submit"}
+                    {isSubmitting ? "t('feedback.submitting')..." : t('feedback.submitBtn')}
                 </Button>
             </HStack>
             {error && (

src/screens/landing-page/sections/feedback/components/FeedbackButtonArray.js

@@ -8,20 +8,21 @@ import SentimentSatisfiedIcon from '@mui/icons-material/SentimentSatisfied';
 import SentimentVerySatisfiedIcon from '@mui/icons-material/SentimentVerySatisfied';
 import FeedbackButtonMobile from "./FeedbackButtonMobile";
 import FeedbackButtonDesktop from "./FeedbackButtonDesktop";
-
-
-// Array of icon components with corresponding sentiment colors
-const icons = [
-    {Icon: SentimentVeryDissatisfiedIcon, color: '#f44336', label: 'Worst'},
-    {Icon: SentimentDissatisfiedIcon, color: '#ff9800', label: 'Poor'},
-    {Icon: SentimentNeutralIcon, color: '#9e9e9e', label: 'Fine'},
-    {Icon: SentimentSatisfiedIcon, color: '#8bc34a', label: 'Good'},
-    {Icon: SentimentVerySatisfiedIcon, color: '#4caf50', label: 'Great'},
-];
+import useTranslation from "../../../../../language/useTranslation";
 
 const FeedbackButtonArray = ({isDesktop, setFeedbackValue}) => {
+    const { t } = useTranslation();
     const [selected, setSelected] = useState(null);
 
+    // Array of icon components with corresponding sentiment colors
+    const icons = [
+        {Icon: SentimentVeryDissatisfiedIcon, color: '#f44336', label: t('feedback.1')},
+        {Icon: SentimentDissatisfiedIcon, color: '#ff9800', label: t('feedback.2')},
+        {Icon: SentimentNeutralIcon, color: '#9e9e9e', label: t('feedback.3')},
+        {Icon: SentimentSatisfiedIcon, color: '#8bc34a', label: t('feedback.4')},
+        {Icon: SentimentVerySatisfiedIcon, color: '#4caf50', label: t('feedback.5')},
+    ];
+
     const handleButtonClick = (index) => {
         setSelected((prevSelected) => prevSelected === index ? null : index);
     };

src/screens/landing-page/sections/how-it-works/LandingPageHowItWorks.js

@@ -5,15 +5,18 @@ import LandingPageHowItWorksMobile from "./views/LandingPageHowItWorksMobile";
 import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
 import LandingPageBasics from "./components/LandingPageBasics";
 import LandingPageSectionGrid from "../../components/LandingPageSectionGrid";
+import useTranslation from "../../../../language/useTranslation";
 
 const LandingPageHowItWorks = ({isDesktop}) => {
+    const { t } = useTranslation();
+
     const quick_check = `${process.env.PUBLIC_URL}/assets/images/landing-page/current_quickcheck_page.jpg`;
     const benefits_overview = `${process.env.PUBLIC_URL}/assets/images/landing-page/current_overview_page.jpg`;
     const benefit_page = `${process.env.PUBLIC_URL}/assets/images/landing-page/current_benefits_page.jpg`;
 
     return (
         <LandingPageSectionWrapper isDesktop={isDesktop}>
-            <LandingPageSectionGrid title={'How it works'}>
+            <LandingPageSectionGrid title={t("howItWorks.header")}>
                 <VStack gap={9} alignItems={'center'}>
                     {isDesktop ?
                         <LandingPageHowItWorksDesktop quick_check={quick_check} benefits_overview={benefits_overview}

src/screens/landing-page/sections/how-it-works/components/LandingPageBasics.js

@@ -4,8 +4,11 @@ import {Typography} from "@mui/material";
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import {green} from "@mui/material/colors";
 import globalStyles from "../../../../../styles/styles";
+import useTranslation from "../../../../../language/useTranslation";
 
 const LandingPageBasics = () => {
+    const { t } = useTranslation();
+
     return (
         <VStack alignItems={'center'} sx={{width: "100%"}}>
             <VStack
@@ -17,33 +20,32 @@ const LandingPageBasics = () => {
                 }}>
                 <HStack>
                     <Typography sx={styles.titleText}>
-                        The basics
+                        {t('theBasics.header')}
                     </Typography>
                 </HStack>
                 <VStack>
                     <HStack alignItems={'center'}>
                         <CheckCircleIcon sx={styles.icon}/>
                         <Typography sx={styles.itemText}>
-                            FörderFunke is <strong>free to use</strong>
+                            {t('theBasics.line1')}
                         </Typography>
                     </HStack>
                     <HStack alignItems={'center'}>
                         <CheckCircleIcon sx={styles.icon}/>
                         <Typography sx={styles.itemText}>
-                            <strong>Your data is yours!</strong> All the information you fill in is stored only
-                            locally on your device
+                            {t('theBasics.line2')}
                         </Typography>
                     </HStack>
                     <HStack alignItems={'center'}>
                         <CheckCircleIcon sx={styles.icon}/>
                         <Typography sx={styles.itemText}>
-                            <strong>No registration</strong>, no login needed
+                            {t('theBasics.line3')}
                         </Typography>
                     </HStack>
                     <HStack alignItems={'center'}>
                         <CheckCircleIcon sx={styles.icon}/>
                         <Typography sx={styles.itemText}>
-                            You can use it on the <strong>phone or laptop</strong>
+                            {t('theBasics.line4')}
                         </Typography>
                     </HStack>
                 </VStack>