Skip to content

Commit 7d37776

Browse files
wbglaeserwbglaeser
committed
implement landingpage section grid
1 parent c9bae58 commit 7d37776

File tree

12 files changed

+78
-63
lines changed

12 files changed

+78
-63
lines changed

‎src/screens/landing-page/components/LandingPageSectionGrid.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
import VStack from "../../../components/VStack";
3+
import LandingPageSectionTitle from "./LandingPageSectionTitle";
4+
5+
const LandingPageSectionGrid = ({children, title}) => {
6+
return (
7+
<VStack gap={5} alignItems={'center'}>
8+
<LandingPageSectionTitle title={title}/>
9+
<VStack gap={5} sx={{maxWidth: '840px'}} alignItems={'center'}>
10+
{children}
11+
</VStack>
12+
</VStack>
13+
)
14+
}
15+
16+
export default LandingPageSectionGrid;

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@ import {Typography} from "@mui/material";
44
import globalStyles from "../../../styles/styles";
55
import LandingPageSectionWrapper from "../components/LandingPageSectionWrapper";
66
import VStack from "../../../components/VStack";
7+
import LandingPageSectionGrid from "../components/LandingPageSectionGrid";
78

89
const LandingPageFact = ({isDesktop}) => {
9-
const width = isDesktop ? '780px' : '100%';
10-
1110
return (
1211
<LandingPageSectionWrapper backgroundColor={globalStyles.primaryColor} isDesktop={isDesktop}>
13-
<VStack alignItems={'center'} sx={{width: '100%'}}>
14-
<VStack sx={{width: width, padding: '16px'}}>
12+
<LandingPageSectionGrid>
13+
<VStack alignItems={'center'}>
1514
<HStack>
1615
<Typography sx={styles.headerSectionTitle}>1 out of 5 households in Germany don’t claim
1716
social benefits they are entitled to.</Typography>
@@ -22,7 +21,7 @@ const LandingPageFact = ({isDesktop}) => {
2221
eligible for and point you the way to apply for them. </Typography>
2322
</HStack>
2423
</VStack>
25-
</VStack>
24+
</LandingPageSectionGrid>
2625
</LandingPageSectionWrapper>
2726
)
2827
}

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

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
11
import React from "react";
22
import {Typography} from "@mui/material";
33
import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
4-
import VStack from "../../../../components/VStack";
54
import CollaborationBox from "./components/CollaborationBox";
6-
import LandingPageSectionTitle from "../../components/LandingPageSectionTitle";
5+
import LandingPageSectionGrid from "../../components/LandingPageSectionGrid";
76

87
const LandingPageCollaboration = ({isDesktop}) => {
9-
108
return (
119
<LandingPageSectionWrapper isDesktop={isDesktop}>
12-
<VStack gap={5} alignItems={'center'}>
13-
<LandingPageSectionTitle title={'Let\'s collaborate'}/>
14-
<VStack gap={5} sx={{maxWidth: '780px'}}>
15-
<Typography sx={styles.text}>
16-
Do you know about some benefits or funding schemes that we are still missing? We would be really
17-
happy to collaborate and include them in the catalogue. We are also very interested to learn
18-
about user groups that could benefit from FörderFunke.
19-
</Typography>
20-
<CollaborationBox isDesktop={isDesktop}/>
21-
</VStack>
22-
</VStack>
10+
<LandingPageSectionGrid title={'Let\'s collaborate'}>
11+
<Typography sx={styles.text}>
12+
Do you know about some benefits or funding schemes that we are still missing? We would be really
13+
happy to collaborate and include them in the catalogue. We are also very interested to learn
14+
about user groups that could benefit from FörderFunke.
15+
</Typography>
16+
<CollaborationBox isDesktop={isDesktop}/>
17+
</LandingPageSectionGrid>
2318
</LandingPageSectionWrapper>
2419
);
2520
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const CollaborationBox = () => {
2727

2828
const styles = {
2929
collaborationBox: {
30-
maxWidth: '780px',
30+
width: '100%',
3131
padding: '24px',
3232
borderRadius: '12px',
3333
backgroundColor: globalStyles.primaryColor

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

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
11
import React from "react";
22
import {Typography} from "@mui/material";
33
import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
4-
import VStack from "../../../../components/VStack";
54
import FeedbackBox from "./components/FeedbackBox";
6-
import LandingPageSectionTitle from "../../components/LandingPageSectionTitle";
5+
import LandingPageSectionGrid from "../../components/LandingPageSectionGrid";
76

87
const LandingPageFeedback = ({isDesktop}) => {
9-
108
return (
119
<LandingPageSectionWrapper isDesktop={isDesktop}>
12-
<VStack gap={5} alignItems={'center'}>
13-
<LandingPageSectionTitle title={'Help us improve'}/>
14-
<VStack gap={5} sx={{maxWidth: '780px'}}>
15-
<Typography sx={styles.text}>
16-
Your feedback is essential for us to understand how we can improve your experience with the
17-
application. It helps us improve and add features that allow people to find the right benefits.
18-
</Typography>
19-
<FeedbackBox isDesktop={isDesktop}/>
20-
</VStack>
21-
</VStack>
10+
<LandingPageSectionGrid title={'Help us improve'}>
11+
<Typography sx={styles.text}>
12+
Your feedback is essential for us to understand how we can improve your experience with the
13+
application. It helps us improve and add features that allow people to find the right benefits.
14+
</Typography>
15+
<FeedbackBox isDesktop={isDesktop}/>
16+
</LandingPageSectionGrid>
2217
</LandingPageSectionWrapper>
2318
);
2419
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const FeedbackBox = ({isDesktop}) => {
6767

6868
const styles = {
6969
feedbackBox: {
70-
maxWidth: '780px',
70+
width: '100%',
7171
padding: '24px',
7272
borderRadius: '12px',
7373
borderStyle: 'solid',

‎src/screens/landing-page/sections/header/views/HeaderBarMobile.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,11 @@ const HeaderBarMobile = ({isApp}) => {
4242
</HStack>
4343
{
4444
showDropdown && (
45-
<VStack gap={2} alignItems={'center'}
46-
sx={{paddingBottom: '16px'}}
45+
<VStack
46+
gap={2} alignItems={'center'}
47+
sx={{
48+
paddingBottom: '16px'
49+
}}
4750
>
4851
{isApp ? null :
4952
featureFlags.newFeedbackSection ? (
@@ -67,7 +70,8 @@ const HeaderBarMobile = ({isApp}) => {
6770
featureFlags.newActivityLog ?
6871
(<>
6972
<LandingPageHollowButton text={t('menu.activityLog')} to={'/activity-log'}/>
70-
<Divider sx={{width: '100%', backgroundColor: globalStyles.colorLightGreyTransparent}}/>
73+
<Divider
74+
sx={{width: '100%', backgroundColor: globalStyles.colorLightGreyTransparent}}/>
7175
</>
7276
)
7377
: null

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

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import LandingPageHowItWorksDesktop from "./views/LandingPageHowItWorksDesktop";
44
import LandingPageHowItWorksMobile from "./views/LandingPageHowItWorksMobile";
55
import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
66
import LandingPageBasics from "./components/LandingPageBasics";
7-
import LandingPageWAppButton from "../../components/LandingPageWAppButton";
8-
import LandingPageSectionTitle from "../../components/LandingPageSectionTitle";
7+
import LandingPageSectionGrid from "../../components/LandingPageSectionGrid";
98

109
const LandingPageHowItWorks = ({isDesktop}) => {
1110
const quick_check = `${process.env.PUBLIC_URL}/assets/images/landing-page/current_quickcheck_page.jpg`;
@@ -14,19 +13,17 @@ const LandingPageHowItWorks = ({isDesktop}) => {
1413

1514
return (
1615
<LandingPageSectionWrapper isDesktop={isDesktop}>
17-
<VStack gap={5}>
18-
<LandingPageSectionTitle title={'That\'s how it works'}/>
19-
{isDesktop ?
20-
<LandingPageHowItWorksDesktop quick_check={quick_check} benefits_overview={benefits_overview} benefit_page={benefit_page}/>
21-
: <LandingPageHowItWorksMobile quick_check={quick_check} benefits_overview={benefits_overview} benefit_page={benefit_page}/>
22-
}
23-
<VStack>
16+
<LandingPageSectionGrid title={'How it works'}>
17+
<VStack gap={9} alignItems={'center'}>
18+
{isDesktop ?
19+
<LandingPageHowItWorksDesktop quick_check={quick_check} benefits_overview={benefits_overview}
20+
benefit_page={benefit_page}/>
21+
: <LandingPageHowItWorksMobile quick_check={quick_check} benefits_overview={benefits_overview}
22+
benefit_page={benefit_page}/>
23+
}
2424
<LandingPageBasics/>
2525
</VStack>
26-
<VStack alignItems={'center'}>
27-
<LandingPageWAppButton backgroundColor={'primary'}/>
28-
</VStack>
29-
</VStack>
26+
</LandingPageSectionGrid>
3027
</LandingPageSectionWrapper>
3128
);
3229
}

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

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,23 @@ import HStack from "../../../../../components/HStack";
33
import {Typography} from "@mui/material";
44
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
55
import {green} from "@mui/material/colors";
6+
import globalStyles from "../../../../../styles/styles";
67

78
const LandingPageBasics = () => {
89
return (
910
<VStack alignItems={'center'} sx={{width: "100%"}}>
10-
<HStack>
11-
<Typography sx={styles.titleText}>
12-
The basics
13-
</Typography>
14-
</HStack>
15-
<HStack>
11+
<VStack
12+
alignItems={'center'}
13+
sx={{
14+
backgroundColor: globalStyles.primaryColor,
15+
padding: '32px',
16+
borderRadius: '15px',
17+
}}>
18+
<HStack>
19+
<Typography sx={styles.titleText}>
20+
The basics
21+
</Typography>
22+
</HStack>
1623
<VStack>
1724
<HStack alignItems={'center'}>
1825
<CheckCircleIcon sx={styles.icon}/>
@@ -23,7 +30,8 @@ const LandingPageBasics = () => {
2330
<HStack alignItems={'center'}>
2431
<CheckCircleIcon sx={styles.icon}/>
2532
<Typography sx={styles.itemText}>
26-
<strong>Your data is yours!</strong> All the information you fill in is stored only locally on your device
33+
<strong>Your data is yours!</strong> All the information you fill in is stored only
34+
locally on your device
2735
</Typography>
2836
</HStack>
2937
<HStack alignItems={'center'}>
@@ -39,7 +47,7 @@ const LandingPageBasics = () => {
3947
</Typography>
4048
</HStack>
4149
</VStack>
42-
</HStack>
50+
</VStack>
4351
</VStack>
4452
);
4553
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {Typography} from "@mui/material";
44

55
const LandingPageInfoCard = ({title, text}) => {
66
return (
7-
<VStack gap={0} sx={{maxWidth: '400px'}}>
7+
<VStack gap={0} sx={{maxWidth: '450px'}}>
88
<VStack gap={1} sx={styles.infoCard}>
99
<HStack>
1010
<Typography sx={styles.titleText}>

0 commit comments

Comments
 (0)