Skip to content

Commit 0186126

Browse files
wbglaeserwbglaeser
committed
update bielefeld landing page
1 parent 519a644 commit 0186126

10 files changed

Lines changed: 185 additions & 21 deletions

File tree

‎public/assets/images/landing-page/bielefeld_image.svg‎

Lines changed: 19 additions & 0 deletions
Loading

‎src/ui/language/translations.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,12 @@ const translations = {
2323
housingBenefit: "Housing benefit",
2424
citizensBenefit: "Citizen's benefit",
2525
bafög: "Bafög",
26-
manyMore: "Many more"
26+
manyMore: "Many more",
27+
bielefeld: {
28+
headerPilot: "Bielefeld Pilot Project",
29+
headerShard1: "Discover support programs in Bielefeld",
30+
subHeader: "Find support programs for you and your situation in Bielefeld. Answer a few questions and we will show you which programs you might be eligible for.",
31+
}
2732
},
2833
fact: {
2934
subHeader: "unclaimed social benefits per year",
@@ -365,6 +370,11 @@ const translations = {
365370
citizensBenefit: "Bürgergeld",
366371
bafög: "Bafög",
367372
manyMore: "Viele Weitere",
373+
bielefeld: {
374+
headerPilot: "Pilotprojekt Bielefeld",
375+
headerShard1: "Entdecke Deine Hilfe in Bielefeld",
376+
subHeader: "Finde Förderprogramme, die zu dir und deiner Situation in Bielefeld passen. Beantworte einfach ein paar Fragen und wir zeigen dir, auf welche Programme du Anspruch haben könntest.",
377+
}
368378
},
369379
fact: {
370380
subHeader: "nicht in Anspruch genommener Sozialleistungen pro Jahr",

‎src/ui/screens/landing-page/LandingPage.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from "react";
1+
import React from "react";
22
import { useStore } from "@/ui/shared-components/ViewportUpdater";
33
import { VBox } from "@/ui/shared-components/LayoutBoxes";
44
import Layout from "@/ui/shared-components/Layout";
@@ -7,23 +7,30 @@ import LandingPagePrinciples from "./sections/principles/LandingPagePrinciples";
77
import LandingPageTeam from "./sections/team/LandingPageTeam";
88
import LandingPageFooter from "./sections/footer/LandingPageFooter";
99
import LandingPageFact from "./sections/fact/LandingPageFact";
10-
import LandingPageTopSection from "./sections/top-section/LandingPageTopSection";
1110
import LandingPageFeedback from "./sections/feedback/LandingPageFeedback";
1211
import LandingPageFunding from "./sections/funding/LandingPageFunding";
1312
import LandingPageMission from "./sections/mission/LandingPageMission";
13+
import LandingPageTopSection from "./sections/top-section/LandingPageTopSection";
14+
import LandingPageTopSectionBielefunke from "./sections/top-section/variants/LandingPageTopSectionBielefunke";
1415

1516
const LandingPage = ({ runway }) => {
1617
const isDesktop = useStore((state) => state.isDesktop);
1718

18-
useEffect(() => {
19-
console.log("runway:", runway);
20-
}, [runway]);
19+
let topSection;
20+
switch (runway) {
21+
case 'bielefunke':
22+
topSection = <LandingPageTopSectionBielefunke isDesktop={isDesktop} />;
23+
break;
24+
default:
25+
topSection = <LandingPageTopSection isDesktop={isDesktop} />;
26+
break;
27+
};
2128

2229
return (
23-
<Layout>
30+
<Layout runway={runway}>
2431
<VBox sx={{ width: '100%' }}>
2532
<VBox>
26-
<LandingPageTopSection isDesktop={isDesktop} runway={runway} />
33+
{topSection}
2734
</VBox>
2835
<VBox>
2936
<LandingPageFact isDesktop={isDesktop} />

‎src/ui/screens/landing-page/sections/top-section/components/LandingPageTopSectionShared.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { motion } from "framer-motion";
44
import { HBox, VBox } from "@/ui/shared-components/LayoutBoxes";
55
import useTranslation from "@/ui/language/useTranslation";
66

7-
const LandingPageTopSectionShared = () => {
7+
const LandingPageTopSectionShared = ({ runway}) => {
88
const { t } = useTranslation();
99
const words = t("home.hero.headerBenefits");
1010
const [currentWordIndex, setCurrentWordIndex] = useState(0);

‎src/ui/screens/landing-page/sections/top-section/components/LandingPageTopSectionSharedVariant.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
import { Typography } from "@mui/material";
3+
import { VBox } from "@/ui/shared-components/LayoutBoxes";
4+
import useTranslation from "@/ui/language/useTranslation";
5+
6+
const LandingPageTopSectionSharedVariant = ({ runway }) => {
7+
const { t } = useTranslation();
8+
9+
return (
10+
<VBox sx={{ gap: 4 }}>
11+
<VBox sx={{ alignItems: 'flex-start', gap: 1 }}>
12+
<Typography variant="h2" sx={{ color: 'pink.main' }}>{t("home.hero.bielefeld.headerPilot")}</Typography>
13+
<Typography variant="h1">{t("home.hero.bielefeld.headerShard1")}</Typography>
14+
</VBox>
15+
<Typography variant="body1" sx={{ textAlign: 'left' }}>{t("home.hero.bielefeld.subHeader")}</Typography>
16+
</VBox>
17+
);
18+
};
19+
20+
export default LandingPageTopSectionSharedVariant;

‎src/ui/screens/landing-page/sections/top-section/variants/LandingPageTopSectionBielefunke.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React, { useState } from "react";
2+
import { useStore } from "@/ui/shared-components/ViewportUpdater";
3+
import { HBox, VBox } from "@/ui/shared-components/LayoutBoxes";
4+
import RegularButton from "@/ui/shared-components/buttons/RegularButton";
5+
import LandingPageSectionWrapper from "../../../components/LandingPageSectionWrapper";
6+
import LandingPageTopSectionShared from "../components/LandingPageTopSectionShared";
7+
import LandingPageTopSectionSharedVariant from "../components/LandingPageTopSectionSharedVariant";
8+
9+
const LandingPageTopSectionBielefunke = ({ runway }) => {
10+
const isDesktop = useStore((state) => state.isDesktop);
11+
const [loaded, setLoaded] = useState(false);
12+
const bielefeldImage = `${process.env.PUBLIC_URL}/assets/images/landing-page/bielefeld_image.svg`;
13+
const imageSize = isDesktop ? 523 : 328;
14+
15+
return (
16+
<LandingPageSectionWrapper>
17+
{isDesktop ? (
18+
<HBox justifyContent="space-between" alignItems="flex-start">
19+
<VBox sx={{ width: "50%", alignItems: "center" }}>
20+
<VBox sx={{ maxWidth: "600px", gap: 4 }}>
21+
<LandingPageTopSectionSharedVariant runway={runway} />
22+
<HBox>
23+
<RegularButton text={'Pilotprojekt'} variant={'whiteOutlinedBlue'} link='/user-routing' />
24+
<RegularButton text={'Alle Ansprüche prüfen'} variant={'yellowContained'} link='/user-routing' />
25+
</HBox>
26+
</VBox>
27+
</VBox>
28+
<VBox sx={{ width: "50%", alignItems: "center", position: "relative" }}>
29+
{!loaded && (
30+
<div
31+
style={{
32+
width: `${imageSize}px`,
33+
height: `${imageSize}px`
34+
}}
35+
/>
36+
)}
37+
<img
38+
src={bielefeldImage}
39+
alt="logo"
40+
style={{
41+
width: `${imageSize}px`,
42+
height: `${imageSize}px`,
43+
position: loaded ? "static" : "absolute",
44+
opacity: loaded ? 1 : 0,
45+
transition: "opacity 0.8s ease-in-out",
46+
borderRadius: "12px",
47+
}}
48+
onLoad={() => setLoaded(true)}
49+
/>
50+
</VBox>
51+
</HBox>
52+
) : (
53+
<VBox sx={{ gap: "46px", alignItems: "center" }}>
54+
<VBox sx={{ alignItems: "center", position: "relative" }}>
55+
{!loaded && (
56+
<div
57+
style={{
58+
width: `${imageSize}px`,
59+
height: `${imageSize}px`,
60+
}}
61+
/>
62+
)}
63+
<img
64+
src={bielefeldImage}
65+
alt="logo"
66+
style={{
67+
width: `${imageSize}px`,
68+
height: `${imageSize}px`,
69+
position: loaded ? "static" : "absolute",
70+
opacity: loaded ? 1 : 0,
71+
transition: "opacity 0.8s ease-in-out",
72+
borderRadius: "12px",
73+
}}
74+
onLoad={() => setLoaded(true)}
75+
/>
76+
</VBox>
77+
78+
<VBox sx={{ gap: "16px" }}>
79+
<LandingPageTopSectionShared />
80+
<RegularButton variant={'yellowContained'} link='/user-routing' />
81+
</VBox>
82+
</VBox>
83+
)}
84+
</LandingPageSectionWrapper>
85+
);
86+
};
87+
88+
export default LandingPageTopSectionBielefunke;

‎src/ui/shared-components/LanguageDropdown.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const LanguageDropdown = ({ isApp }) => {
2222
IconComponent={() => null}
2323
sx={{
2424
backgroundColor: "white !important",
25-
border: `1px solid ${isApp ? "white" : "black"}`,
25+
border: `1px solid ${isApp ? "white" : "#868B8E"}`,
2626
borderRadius: "16px",
2727
padding: "10px 12px",
2828
color: isApp ? "white" : "black",

‎src/ui/shared-components/Layout.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React from 'react';
2-
import {VBox} from "./LayoutBoxes";
2+
import { VBox } from "./LayoutBoxes";
33
import HeaderBar from "./header/HeaderBar";
4-
import {useStore} from "./ViewportUpdater";
4+
import { useStore } from "./ViewportUpdater";
55

6-
const Layout = ({children, isApp = false, logo = true, back = null, gap = 2}) => {
6+
const Layout = ({ children, runway = null, isApp = false, gap = 2 }) => {
77
const isDesktop = useStore((state) => state.isDesktop);
88
const backgroundColor = isApp ? 'blue.dark' : 'white.main';
9-
const minHeight = isApp ? '100vh' : 'auto';
9+
const minHeight = isApp ? '100vh' : 'auto';
1010

1111
return (
12-
<VBox gap={0} sx={{backgroundColor: backgroundColor, minHeight: minHeight}}>
13-
<HeaderBar isApp={isApp} isDesktop={isDesktop} logo={logo} back={back}/>
12+
<VBox gap={0} sx={{ backgroundColor: backgroundColor, minHeight: minHeight }}>
13+
<HeaderBar isApp={isApp} isDesktop={isDesktop} runway={runway} />
1414
<VBox data-testid={'layout-container'}>
15-
<VBox gap={gap} sx={{ width: '100%'}} data-testid="main-parent container" alignItems={'center'}>
15+
<VBox gap={gap} sx={{ width: '100%' }} data-testid="main-parent container" alignItems={'center'}>
1616
{children}
1717
</VBox>
1818
</VBox>

‎src/ui/shared-components/header/HeaderBar.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import HeaderBarMobile from "./views/HeaderBarMobile";
33
import HeaderBarDesktop from "./views/HeaderBarDesktop";
44
import { VBox } from "@/ui/shared-components/LayoutBoxes";
55

6-
const HeaderBar = ({ isApp, isDesktop }) => {
6+
const HeaderBar = ({ isApp, isDesktop, runway }) => {
77
const backgroundColor = isApp ? 'blue.dark' : 'white.main';
88
const sticky = isApp ? "relative" : "sticky";
99

@@ -19,7 +19,7 @@ const HeaderBar = ({ isApp, isDesktop }) => {
1919
backgroundColor: backgroundColor
2020
}}
2121
>
22-
{isDesktop ? <HeaderBarDesktop isApp={isApp} /> : <HeaderBarMobile isApp={isApp} />}
22+
{isDesktop ? <HeaderBarDesktop isApp={isApp} runway={runway} /> : <HeaderBarMobile isApp={isApp} runway={runway} />}
2323
</VBox>
2424
);
2525
};

‎src/ui/shared-components/header/views/HeaderBarDesktop.js‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@ import LogoBar from '@/ui/shared-components/LogoBar';
66
import LandingPageHollowButtonDesktop from '@/ui/screens/landing-page/components/LandingPageButtonDesktop';
77
import RegularButton from '@/ui/shared-components/buttons/RegularButton';
88
import LanguageDropdown from '@/ui/shared-components/LanguageDropdown';
9+
import { Typography } from '@mui/material';
10+
import theme from '@/theme';
911

10-
const HeaderBarDesktop = ({ isApp }) => {
12+
const HeaderBarDesktop = ({ isApp, runway }) => {
1113
const { t } = useTranslation();
1214

1315
const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < 1200);
@@ -29,8 +31,26 @@ const HeaderBarDesktop = ({ isApp }) => {
2931
}}>
3032
<HBox alignItems={'center'}>
3133
<Link to={"/"} style={{ textDecoration: 'none', color: "black" }}>
32-
<LogoBar size={'large'} isApp={isApp} />
34+
<HBox alignItems={'center'}>
35+
<LogoBar size={'large'} isApp={isApp} />
36+
<HBox
37+
sx={{
38+
alignItems: 'center',
39+
borderLeft: `2px solid ${theme.palette.pink.main}`,
40+
paddingLeft: 2,
41+
}}
42+
>
43+
{
44+
runway === 'bielefunke' && (
45+
<Typography variant='h2' sx={{ color: "pink.main", fontWeight: '500', marginLeft: '8px' }}>
46+
Bielefeld
47+
</Typography>
48+
)
49+
}
50+
</HBox>
51+
</HBox>
3352
</Link>
53+
3454
</HBox>
3555
<HBox justifyContent={'flex-end'} alignItems={'center'}>
3656
<HBox gap={5}>

0 commit comments

Comments
 (0)