Skip to content

Commit ee410f8

Browse files
author
Jeroen van Steijn
committed
Add homepage centered
1 parent ce1b83f commit ee410f8

File tree

10 files changed

+79
-51
lines changed

10 files changed

+79
-51
lines changed

‎src/containers/Cases/Cases.components.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,32 @@ import Button from '../../components/Button/Button';
33

44
export const CenteredRow = styled.div`
55
text-align: center;
6-
`
6+
`;
77

88
export const StyledRow = styled.div`
99
display: grid;
1010
grid-template-columns: 3fr 5fr;
1111
max-width: 1400px;
1212
margin: auto;
1313
margin-top: 10px;
14-
background: rgb(37,28,36);
15-
`
14+
background: rgb(37, 28, 36);
15+
`;
1616

1717
export const LeftInner = styled.div`
1818
position: absolute;
1919
top: 50%;
2020
transform: translateY(-50%);
2121
padding-left: 80px;
2222
max-width: 90%;
23-
`
23+
`;
2424

2525
export const Left = styled.div`
2626
position: relative;
2727
`;
2828

29-
export const Right = styled.div`
30-
31-
`;
29+
export const Right = styled.div``;
3230

3331
export const StyledButton = styled(Button)`
3432
width: 450px;
3533
padding: 10px;
36-
`;
34+
`;

‎src/containers/Cases/Cases.tsx‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import React from 'react';
22
import TextBlock from '../TextBlock/TextBlock';
3-
import { Left, Right, LeftInner, StyledRow, CenteredRow, StyledButton } from './Cases.components';
3+
import {
4+
Left,
5+
Right,
6+
LeftInner,
7+
StyledRow,
8+
CenteredRow,
9+
StyledButton,
10+
} from './Cases.components';
411
import Button from '../../components/Button/Button';
512

613
const dearlyImg = require('../../images/img/cases/dearly/home.png');
@@ -10,12 +17,15 @@ const Cases: React.FC = () => (
1017
<StyledRow>
1118
<Left>
1219
<LeftInner>
13-
<TextBlock subtitle="Dearly" headingType="h3" title="Ondersteuning bij rouwverwerking">
14-
Een nieuwe mobiele rouwapp voor persoonlijke ondersteuning en maatschappelijke ontwikkeling
20+
<TextBlock
21+
subtitle="Dearly"
22+
headingType="h3"
23+
title="Ondersteuning bij rouwverwerking"
24+
>
25+
Een nieuwe mobiele rouwapp voor persoonlijke
26+
ondersteuning en maatschappelijke ontwikkeling
1527
</TextBlock>
16-
<Button href="/case/dearly">
17-
Bekijk case
18-
</Button>
28+
<Button href="/case/dearly">Bekijk case</Button>
1929
</LeftInner>
2030
</Left>
2131
<Right>
@@ -25,12 +35,15 @@ const Cases: React.FC = () => (
2535
<StyledRow>
2636
<Left>
2737
<LeftInner>
28-
<TextBlock subtitle="Airchip" headingType="h3" title="Barman in je broekzak">
29-
Nooit meer in de rij op een festival of evenement: bestel en betaal met Airchip. Bekend van Dragon's Den!
38+
<TextBlock
39+
subtitle="Airchip"
40+
headingType="h3"
41+
title="Barman in je broekzak"
42+
>
43+
Nooit meer in de rij op een festival of evenement:
44+
bestel en betaal met Airchip. Bekend van Dragon&apos;s Den!
3045
</TextBlock>
31-
<Button href="/case/dearly">
32-
Bekijk case
33-
</Button>
46+
<Button href="/case/dearly">Bekijk case</Button>
3447
</LeftInner>
3548
</Left>
3649
<Right>

‎src/containers/ContentPageHeader/ContentPageHeader.components.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,14 @@ export const MainHeaderContent = styled.div`
3535
display: grid;
3636
grid-template-columns: 1fr;
3737
@media screen and (${mediaQueryMin.sm}) {
38-
grid-template-columns: 1fr 1fr;
38+
grid-template-columns: 3fr 5fr;
3939
}
40-
max-width: 1300px;
40+
grid-gap: 50px;
41+
max-width: 1400px;
4142
margin: auto;
43+
margin-top: 45px;
44+
`;
45+
46+
export const CenterParent = styled.div`
47+
position: relative;
4248
`;

‎src/containers/ContentPageHeader/ContentPageHeader.tsx‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import React from 'react';
22
import ImageBlock from '../../components/ImageBlock/ImageBlock';
33
import TextBlock from '../TextBlock/TextBlock';
4-
import { MainHeader, MainHeaderContent } from './ContentPageHeader.components';
4+
import {
5+
CenterParent,
6+
MainHeader,
7+
MainHeaderContent,
8+
} from './ContentPageHeader.components';
59

610
interface Props {
711
subtitle: string;
@@ -29,15 +33,18 @@ const ContentPageHeader: React.FC<Props> = ({
2933
return (
3034
<MainHeader shadow={shadow} hero={hero}>
3135
<MainHeaderContent>
32-
<TextBlock
33-
useGatsbyLink={useGatsbyLink}
34-
subtitle={subtitle}
35-
title={title}
36-
href={href}
37-
button={button}
38-
>
39-
{text}
40-
</TextBlock>
36+
<CenterParent>
37+
<TextBlock
38+
verticalCenter
39+
useGatsbyLink={useGatsbyLink}
40+
subtitle={subtitle}
41+
title={title}
42+
href={href}
43+
button={button}
44+
>
45+
{text}
46+
</TextBlock>
47+
</CenterParent>
4148
<ImageBlock src={img} alt={title} />
4249
</MainHeaderContent>
4350
</MainHeader>

‎src/containers/Process/Process.components.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import { Col } from '../../lib/Grid';
44

55
const { mediaQueryMin } = theme;
66

7-
export const Step = styled(Col)`
7+
const Step = styled(Col)`
88
@media (${mediaQueryMin.xs}) {
99
margin: 0 2em;
1010
}
1111
`;
12+
13+
export default Step;

‎src/containers/Process/Process.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@ import TextBlock from '../TextBlock/TextBlock';
33
import { Container, Row } from '../../lib/Grid';
44
import { Step } from './Process.components';
55

6-
const step1 = require('../../images/img/content/workflow/analyze.svg');
7-
const step2 = require('../../images/img/content/workflow/strategize.svg');
8-
const step3 = require('../../images/img/content/workflow/realize.svg');
9-
106
const Process: React.FC<Record<string, never>> = () => (
117
<Container>
128
<Row gutterWidth={30}>
@@ -20,11 +16,7 @@ const Process: React.FC<Record<string, never>> = () => (
2016
</TextBlock>
2117
</Step>
2218
<Step md={5.55} lg={3.55}>
23-
<TextBlock
24-
subtitle="02."
25-
headingType="h3"
26-
title="Strategie"
27-
>
19+
<TextBlock subtitle="02." headingType="h3" title="Strategie">
2820
Vervolgens maken wij een duidelijke strategie, waarin we
2921
uiteenzetten welke punten we aan gaan pakken en vooral op
3022
welke manier we dat doen. Bij het ontwikkelen van deze
@@ -34,7 +26,11 @@ const Process: React.FC<Record<string, never>> = () => (
3426
</TextBlock>
3527
</Step>
3628
<Step md={5.55} lg={3.55}>
37-
<TextBlock subtitle="03." headingType="h3" title="Technische uitvoering">
29+
<TextBlock
30+
subtitle="03."
31+
headingType="h3"
32+
title="Technische uitvoering"
33+
>
3834
Nadat we alles helemaal hebben geanalyseerd en gepland, is
3935
het tijd om de handen uit de mouwen te steken en het plan te
4036
realiseren. Hierbij werken we volgens de scrum-methode. Op

‎src/containers/TextBlock/TextBlock.components.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,12 @@ export const StyledButton = styled(Button)`
2626
margin: 1em 0;
2727
`;
2828

29-
const verticalCenterCode = ``
29+
const verticalCenterCode = `
30+
position: absolute;
31+
top: 50%;
32+
transform: translateY(-50%);
33+
`;
3034

3135
export const TextBlockContainer = styled.div<{ verticalCenter?: boolean }>`
3236
${(props) => (props.verticalCenter ? verticalCenterCode : '')}
33-
`
37+
`;

‎src/containers/TextBlock/TextBlock.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
StyledSubtitle,
1010
TextBlockContainer,
1111
} from './TextBlock.components';
12+
1213
interface ImageProps {
1314
src?: string;
1415
alt?: string;
@@ -86,9 +87,8 @@ const TextBlock: React.FC<TextBlockProps> = ({
8687
button,
8788
useGatsbyLink,
8889
children,
89-
verticalCenter
90+
verticalCenter,
9091
}) => {
91-
9292
return (
9393
<TextBlockContainer verticalCenter={verticalCenter}>
9494
<Image src={image} alt={alt} />
@@ -100,6 +100,4 @@ const TextBlock: React.FC<TextBlockProps> = ({
100100
);
101101
};
102102

103-
104-
105103
export default TextBlock;

‎src/pages/case/airchip.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,12 @@ const Dearly: React.FC<Record<string, never>> = () => (
9696
<TextAndImage img={rouwen} alt="Maak rouwen bespreekbaar" reverse>
9797
<h3>Doel van Airchip</h3>
9898
<p>
99-
Airchip wil het maximale halen uit de tijd die jij met vrienden en geliefden besteedt. Je mist geen moment meer van je favoriete festival omdat jij de drankjes ging halen. Je wordt geholpen waar en wanneer je wilt. Het enige dat je nodig hebt is een telefoon en geld op je wallet. Airchip zorgt voor een betere en snellere bestel- en betaalmethode.
99+
Airchip wil het maximale halen uit de tijd die jij met
100+
vrienden en geliefden besteedt. Je mist geen moment meer van
101+
je favoriete festival omdat jij de drankjes ging halen. Je
102+
wordt geholpen waar en wanneer je wilt. Het enige dat je
103+
nodig hebt is een telefoon en geld op je wallet. Airchip
104+
zorgt voor een betere en snellere bestel- en betaalmethode.
100105
</p>
101106
</TextAndImage>
102107
</Section>

‎src/pages/home.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,7 @@ const Home: React.FC<Record<string, never>> = () => (
4242
<Container>
4343
<Row>
4444
<Col md={12} lg={6} xl={6}>
45-
<Row gutterWidth={20}>
46-
</Row>
45+
<Row gutterWidth={20} />
4746
</Col>
4847
<CenterAlignedCol offset={{ lg: 1 }} md={12} lg={5}>
4948
<TextBlock

0 commit comments

Comments
 (0)