add landingpage section title

Author: wbglaeser

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

@@ -3,15 +3,14 @@ import {Typography} from "@mui/material";
 import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
 import VStack from "../../../../components/VStack";
 import CollaborationBox from "./components/CollaborationBox";
+import LandingPageSectionTitle from "../../components/LandingPageSectionTitle";
 
 const LandingPageCollaboration = ({isDesktop}) => {
 
     return (
         <LandingPageSectionWrapper isDesktop={isDesktop}>
             <VStack gap={5} alignItems={'center'}>
-                <Typography sx={styles.titleText}>
-                    Let's collaborate
-                </Typography>
+                <LandingPageSectionTitle title={'Let\'s collaborate'}/>
                 <VStack gap={5} sx={{maxWidth: '780px'}}>
                     <Typography sx={styles.text}>
                         Do you know about some benefits or funding schemes that we are still missing? We would be really

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

@@ -2,17 +2,15 @@ import React from "react";
 import {Typography} from "@mui/material";
 import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
 import VStack from "../../../../components/VStack";
-import globalStyles from "../../../../styles/styles";
 import FeedbackBox from "./components/FeedbackBox";
+import LandingPageSectionTitle from "../../components/LandingPageSectionTitle";
 
 const LandingPageFeedback = ({isDesktop}) => {
 
     return (
-        <LandingPageSectionWrapper backgroundColor={globalStyles.primaryColor} isDesktop={isDesktop}>
+        <LandingPageSectionWrapper isDesktop={isDesktop}>
             <VStack gap={5} alignItems={'center'}>
-                <Typography sx={styles.titleText}>
-                    Help us improve FörderFunke
-                </Typography>
+                <LandingPageSectionTitle title={'Help us improve'}/>
                 <VStack gap={5} sx={{maxWidth: '780px'}}>
                     <Typography sx={styles.text}>
                         Your feedback is essential for us to understand how we can improve your experience with the

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

@@ -68,9 +68,6 @@ const FeedbackBox = ({isDesktop}) => {
 const styles = {
     feedbackBox: {
         maxWidth: '780px',
-        padding: '24px',
-        borderRadius: '12px',
-        backgroundColor: 'white'
     },
     text: {
         fontSize: '20px',

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

@@ -1,12 +1,11 @@
 import React from "react";
+import VStack from "../../../../components/VStack";
 import LandingPageHowItWorksDesktop from "./views/LandingPageHowItWorksDesktop";
 import LandingPageHowItWorksMobile from "./views/LandingPageHowItWorksMobile";
 import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
-import VStack from "../../../../components/VStack";
-import HStack from "../../../../components/HStack";
-import {Typography} from "@mui/material";
 import LandingPageBasics from "./components/LandingPageBasics";
 import LandingPageWAppButton from "../../components/LandingPageWAppButton";
+import LandingPageSectionTitle from "../../components/LandingPageSectionTitle";
 
 const LandingPageHowItWorks = ({isDesktop}) => {
     const quick_check = `${process.env.PUBLIC_URL}/assets/images/landing-page/current_quickcheck_page.jpg`;
@@ -16,13 +15,7 @@ const LandingPageHowItWorks = ({isDesktop}) => {
     return (
         <LandingPageSectionWrapper isDesktop={isDesktop}>
             <VStack gap={5}>
-                <VStack>
-                    <HStack justifyContent={'center'} sx={{width: '100%'}}>
-                        <Typography sx={styles.titleText}>
-                            That's how it works
-                        </Typography>
-                    </HStack>
-                </VStack>
+                <LandingPageSectionTitle title={'That\'s how it works'}/>
                 {isDesktop ?
                     <LandingPageHowItWorksDesktop quick_check={quick_check} benefits_overview={benefits_overview} benefit_page={benefit_page}/>
                     : <LandingPageHowItWorksMobile quick_check={quick_check} benefits_overview={benefits_overview} benefit_page={benefit_page}/>
@@ -38,17 +31,4 @@ const LandingPageHowItWorks = ({isDesktop}) => {
     );
 }
 
-const styles = {
-    titleText: {
-        fontWeight: 'bold',
-        fontSize: '36px',
-        textAlign: 'center',
-    },
-    subTitleText: {
-        fontSize: '28px',
-        textAlign: 'center',
-        fontWeight: '300'
-    }
-};
-
 export default LandingPageHowItWorks;

src/screens/landing-page/sections/principles/LandingPagePrinciples.js

@@ -4,30 +4,17 @@ import LandingPagePrinciplesDesktop from "./views/LandingPagePrinciplesDesktop";
 import LandingPagePrinciplesMobile from "./views/LandingPagePrinciplesMobile";
 import globalStyles from "../../../../styles/styles";
 import VStack from "../../../../components/VStack";
-import HStack from "../../../../components/HStack";
-import {Typography} from "@mui/material";
+import LandingPageSectionTitle from "../../components/LandingPageSectionTitle";
 
 const LandingPagePrinciples = ({isDesktop}) => {
     return (
         <LandingPageSectionWrapper backgroundColor={globalStyles.primaryColor} isDesktop={isDesktop}>
             <VStack gap={5}>
-                <HStack justifyContent={'center'} sx={{width: '100%'}}>
-                    <Typography sx={styles.titleText}>
-                        Our Principles
-                    </Typography>
-                </HStack>
+                <LandingPageSectionTitle title={'Our principles'}/>
                 {isDesktop ? <LandingPagePrinciplesDesktop/> : <LandingPagePrinciplesMobile/>}
             </VStack>
         </LandingPageSectionWrapper>
     );
 }
 
-const styles = {
-    titleText: {
-        fontWeight: 'bold',
-        fontSize: '36px',
-        textAlign: 'center',
-    }
-};
-
 export default LandingPagePrinciples;

src/screens/landing-page/sections/team/LandingPageTeam.js

@@ -1,32 +1,19 @@
 import React from "react";
 import VStack from "../../../../components/VStack";
-import {Typography} from "@mui/material";
-import HStack from "../../../../components/HStack";
 import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
 import LandingPageTeamDesktop from "./views/LandingPageTeamDesktop";
 import LandingPageTeamMobile from "./views/LandingPageTeamMobile";
+import LandingPageSectionTitle from "../../components/LandingPageSectionTitle";
 
 const LandingPageTeam = ({isDesktop}) => {
     return (
         <LandingPageSectionWrapper isDesktop={isDesktop}>
             <VStack gap={5}>
-                <HStack justifyContent={'center'} sx={{width: '100%'}}>
-                    <Typography sx={styles.titleText}>
-                        Let's connect!
-                    </Typography>
-                </HStack>
+                <LandingPageSectionTitle title={'Let\'s connect'}/>
                 {isDesktop ? <LandingPageTeamDesktop/> : <LandingPageTeamMobile/>}
             </VStack>
         </LandingPageSectionWrapper>
     );
 }
 
-const styles = {
-    titleText: {
-        fontWeight: 'bold',
-        fontSize: '36px',
-        textAlign: 'center',
-    }
-};
-
 export default LandingPageTeam;