Skip to content

Commit ddfc1fd

Browse files
author
laksjfalksjf
committed
Added 'Deliverables-element'
Added deliverables elemen, did a minor layout adjustment at the insights page.
1 parent 3ba3ac0 commit ddfc1fd

File tree

15 files changed

+253
-25
lines changed

15 files changed

+253
-25
lines changed

‎src/components/ArrowButton.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ ButtonBase.defaultProps = {
3333
className: '',
3434
};
3535

36-
const Button = styled(ButtonBase)`
36+
const ArrowButton = styled(ButtonBase)`
3737
display: inline-block;
3838
background: transparent;
3939
padding: 0.66em 2em;
@@ -49,4 +49,4 @@ const Button = styled(ButtonBase)`
4949
}
5050
`;
5151

52-
export default Button;
52+
export default ArrowButton;

‎src/containers/ContentBlocks/ContentBlocks.components.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@ export const TextAndImageBase = styled.div`
1313
display: grid;
1414
grid-template: auto / ${container.sm} 1fr 1fr ${container.sm};
1515
grid-template-areas: 'imgLeft imgLeft imgRight imgRight';
16-
padding: 5vh 0;
16+
padding: ${props => (props.padded ? '10vh' : 0)} 0;
1717
grid-column-gap: 3em;
1818
}
19-
@media (${mediaQueryMin.md}) {
19+
/* @media (${mediaQueryMin.md}) {
2020
grid-template: auto / ${container.md} 1fr 1fr ${container.md};
21-
}
22-
@media (${mediaQueryMin.lg}) {
21+
} */
22+
/* @media (${mediaQueryMin.lg}) {
2323
grid-template: auto / ${container.lg} 1fr 1fr ${container.lg};
2424
grid-column-gap: 5vw;
25-
}
25+
} */
2626
@media (${mediaQueryMin.xl}) {
2727
grid-template: auto / ${container.xl} 1fr 1fr ${container.xl};
2828
}

‎src/containers/ContentBlocks/ContentBlocks.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from './ContentBlocks.components';
99

1010
export const TextAndImage = props => {
11-
const { children, img, alt, reverse, fluid } = props;
11+
const { children, img, alt, reverse, fluid, padded } = props;
1212

1313
const getImgPos = () => {
1414
if (reverse) {
@@ -36,7 +36,7 @@ export const TextAndImage = props => {
3636
};
3737

3838
return (
39-
<TextAndImageBase>
39+
<TextAndImageBase padded={padded}>
4040
<ImageWrapper
4141
reverse={reverse}
4242
fluid={fluid}

‎src/containers/Deliverables.jsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import theme from '../styles/theme';
4+
5+
const plusBullet = require('../images/icons/ui/plus-bullet.svg');
6+
7+
const { colors, mediaQueryMin, containerWidth } = theme;
8+
const { secondary } = colors;
9+
10+
const DeliverablesBase = styled.section`
11+
@media (${mediaQueryMin.xs}) {
12+
display: grid;
13+
grid-template-columns: 10vw 1fr 1fr 1fr 1fr 1fr 1fr 10vw;
14+
grid-template-rows: 2fr 3em 3fr;
15+
grid-gap: 2em;
16+
align-content: center;
17+
}
18+
`;
19+
20+
const DeliverablesContent = styled.div`
21+
grid-row: 2/4;
22+
grid-column: 2/9;
23+
z-index: 1;
24+
background: ${secondary};
25+
padding: 10vw;
26+
display: flex;
27+
flex-direction: column;
28+
justify-content: center;
29+
`;
30+
31+
const ClientInfo = styled.div`
32+
grid-row: 1;
33+
grid-column: 5/8;
34+
padding: 1em;
35+
display: flex;
36+
justify-content: flex-end;
37+
& > * {
38+
width: 50%;
39+
padding: 1em;
40+
}
41+
`;
42+
43+
const Figure = styled.figure`
44+
grid-row: 1/3;
45+
grid-column: 1/5;
46+
overflow: hidden;
47+
align-self: self-end;
48+
`;
49+
50+
const List = styled.ul`
51+
columns: 3;
52+
list-style-position: outside;
53+
list-style-image: url('${plusBullet}');
54+
`;
55+
56+
const LI = styled.li`
57+
margin: 0 0.1em;
58+
margin-bottom: 0.66em;
59+
font-size: 1.11em;
60+
`;
61+
62+
const Deliverables = ({img, client}) => {
63+
return (
64+
<DeliverablesBase>
65+
<DeliverablesContent>
66+
<p class="subtitle">Deliverables</p>
67+
<List>
68+
<LI>Workflow Strategy</LI>
69+
<LI>API-development</LI>
70+
<LI>Cloud deployment</LI>
71+
<LI>Automatische deploystaat</LI>
72+
<LI>UX/UI-Design</LI>
73+
<LI>Service Design</LI>
74+
<LI>Backend Development</LI>
75+
</List>
76+
</DeliverablesContent>
77+
<ClientInfo>
78+
<h6>{client}</h6>
79+
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
80+
</ClientInfo>
81+
<Figure>
82+
<img alt="test" src={img} />
83+
</Figure>
84+
</DeliverablesBase>
85+
)
86+
}
87+
88+
export default Deliverables;

‎src/containers/Header.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const HeaderBase = styled.header`
1919
padding: 3em ${containerWidth.sm};
2020
}
2121
@media (${mediaQueryMin.md}){
22-
padding: 5em ${containerWidth.md};
22+
padding: 2em ${containerWidth.md};
2323
}
2424
@media (${mediaQueryMin.lg}){
2525
padding: 5em ${containerWidth.lg};
@@ -46,7 +46,7 @@ const Header = ({title, subtitle, tagline, img, children}) => {
4646
<h1>{title}</h1>
4747
</div>
4848
<div>
49-
<p class="introduction">{tagline}</p>
49+
<p>{tagline}</p>
5050
{children}
5151
</div>
5252
</HeaderInformation>

‎src/images/icons/ui/plus-bullet.png‎

432 Bytes
Loading

‎src/images/icons/ui/plus-bullet.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎src/images/img/cases/dawny/devices.svg‎

Lines changed: 103 additions & 0 deletions
Loading

‎src/images/img/cases/dawny/usecase.png‎

4.43 MB
Loading

‎src/images/img/cases/dawny/usecase2.jpg‎

661 KB
Loading

0 commit comments

Comments
 (0)