change landing page slogan

Author: wbglaeser

src/ui/language/translations.js

@@ -40,6 +40,9 @@ const translations = {
                 }
             },
             fact: {
+                header: "Your Support",
+                headerText: "is not a",
+                rotatingWords: ["coincidence", "luxury", "privilege"],
                 subHeader: "unclaimed social benefits per year",
                 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."
             },
@@ -431,6 +434,9 @@ const translations = {
                 }
             },
             fact: {
+                header: "Unterstützung",
+                headerText: "ist kein",
+                rotatingWords: ["Zufall", "Luxus", "Privileg"],
                 subHeader: "nicht in Anspruch genommener Sozialleistungen pro Jahr",
                 text: "Mit FörderFunke möchten wir erreichen, dass Sozialleistungen in Deutschland für alle zugänglich und leicht verständlich sind. Wir zeigen Ihnen, auf welche Sozialleistungen Sie Anspruch haben könnten und wie Sie sie beantragen können."
             },

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

@@ -1,12 +1,37 @@
-import React from "react";
-import { Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Typography, Box } from "@mui/material";
+import { keyframes } from "@mui/system";
 import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
 import useTranslation from "@/ui/language/useTranslation";
 import { HBox, VBox } from "@/ui/shared-components/LayoutBoxes";
 import RegularButton from "@/ui/shared-components/buttons/RegularButton";
+import { useLanguageStore } from '@/ui/storage/useLanguageStore';
+
+const flipIn = keyframes`
+  from { transform: rotateX(-90deg); opacity: 0; }
+  to   { transform: rotateX(0deg);  opacity: 1; }
+`;
+
+const minWidth = {
+    de: "14.5ch",
+    de_es: "14.5ch",
+    en: "19ch",
+};
 
 const LandingPageFact = () => {
     const { t } = useTranslation();
+    const language = useLanguageStore((state) => state.language);
+
+
+    const rotatingWord = t("home.fact.rotatingWords");
+    const [index, setIndex] = useState(0);
+
+    useEffect(() => {
+        const id = setInterval(() => {
+            setIndex((i) => (i + 1) % rotatingWord.length);
+        }, 2000);
+        return () => clearInterval(id);
+    });
 
     return (
         <LandingPageSectionWrapper>
@@ -31,33 +56,52 @@ const LandingPageFact = () => {
                             gap: 4,
                         }}
                     >
-                        <VBox sx={{ width: "100%", alignItems: { xs: "flex-start", md: "center" } }}>
+                        <VBox sx={{
+                            gap: 1,
+                            width: "100%",
+                            alignItems: { xs: "flex-start", md: "center" }
+                        }}>
                             <Typography variant="h1" color="pink.main">
-                                15.000.000.000 €
+                                {t("home.fact.header")}
                             </Typography>
                             <Typography
                                 variant="h4"
                                 sx={{
+                                    minWidth: minWidth[language] || "14.5ch",
                                     textAlign: { xs: "left", md: "center" },
                                     fontWeight: 400,
-                                    maxWidth: "400px",
                                     color: "black.main",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 1,
+                                    flexWrap: "wrap",
                                 }}
                             >
-                                {t("home.fact.subHeader")}
+                                {t("home.fact.headerText")}{" "}
+                                <Box
+                                    component="span"
+                                    key={index}
+                                    sx={{
+                                        display: "inline-block",
+                                        transformOrigin: "50% 80%",
+                                        animation: `${flipIn} 600ms ease`,
+                                    }}
+                                >
+                                    <Typography variant="h2" sx={{ fontWeight: "bold", color: "pink.main" }}>
+                                        {rotatingWord[index]}
+                                    </Typography>
+                                </Box>
                             </Typography>
                         </VBox>
                         <HBox>
-                            <Typography
-                                variant="body1"
-                                sx={{ textAlign: { xs: "left", md: "center" } }}
-                            >
+                            <Typography variant="body1" sx={{ textAlign: { xs: "left", md: "center" } }}>
                                 {t("home.fact.text")}
                             </Typography>
                         </HBox>
                     </VBox>
+
                     <HBox>
-                        <RegularButton variant={'blackContained'} link={'/user-routing'} />
+                        <RegularButton variant={"blackContained"} link={"/user-routing"} />
                     </HBox>
                 </VBox>
             </VBox>