Skip to content

Commit 102f239

Browse files
author
Jeroen van Steijn
committed
Merge branch '130-add-fantescy-case' into 'develop'
Resolve "Add FantESCy Case" and "Add Youngpwr Case" Closes #130 and #129 See merge request bytecode/bytecode-website!145
2 parents 3095227 + 3427fc9 commit 102f239

26 files changed

+1017
-35
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const TextAndImageBase = styled.div`
2727

2828
export const ImageWrapper = styled.figure`
2929
grid-area: ${props => props.pos};
30-
30+
width: ${props => (props.small ? '70%' : '100%')};
3131
margin: 1em 1em;
3232
@media (${mediaQueryMin.sm}) {
3333
margin: 5em 0;

‎src/containers/ContentBlocks/ContentBlocks.jsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
IntroductionBase,
1010
} from './ContentBlocks.components';
1111
import theme from '../../styles/theme';
12+
import TextBlock from '../TextBlock/TextBlock';
1213

1314
const { mediaQueryMin } = theme;
1415

@@ -20,6 +21,7 @@ export const TextAndImage = ({
2021
children,
2122
img,
2223
alt,
24+
small,
2325
reverse,
2426
fluid,
2527
padded,
@@ -69,6 +71,7 @@ export const TextAndImage = ({
6971
fluid={fluid}
7072
translate={getImgPos().translate}
7173
pos={getImgPos().pos}
74+
small={small}
7275
>
7376
<img src={img} alt={alt} />
7477
</ImageWrapper>
@@ -96,12 +99,14 @@ TextAndImage.propTypes = {
9699
alt: PropTypes.string.isRequired,
97100
reverse: PropTypes.bool,
98101
fluid: PropTypes.bool,
102+
small: PropTypes.bool,
99103
padded: PropTypes.bool,
100104
};
101105

102106
TextAndImage.defaultProps = {
103107
reverse: false,
104108
fluid: false,
109+
small: false,
105110
padded: false,
106111
};
107112

@@ -126,3 +131,126 @@ export const ProfilePicture = styled.div`
126131
background-size: cover;
127132
margin-bottom: 1.66em;
128133
`;
134+
135+
const ResultsAndNumbersContainer = styled.div`
136+
margin: 3em;
137+
`;
138+
const TextBlockContainer = styled.div`
139+
padding: 1em;
140+
141+
margin: 0;
142+
@media (${mediaQueryMin.sm}) {
143+
margin: 3em;
144+
width: 30em;
145+
}
146+
`;
147+
const NumbersContainer = styled.div`
148+
display: grid;
149+
grid-template-columns: 1fr;
150+
margin: 30px;
151+
justify-content: center;
152+
z-index: 1;
153+
position: relative;
154+
height: 25em;
155+
@media (${mediaQueryMin.sm}) {
156+
height: 20em;
157+
grid-template-columns: 1fr 1fr 1fr;
158+
}
159+
160+
&:before {
161+
position: absolute;
162+
top: 0;
163+
left: 2.5%;
164+
background-color: #262626;
165+
width: 95%;
166+
content: '';
167+
height: 100%;
168+
z-index: -1;
169+
opacity: 0.6;
170+
@media (${mediaQueryMin.sm}) {
171+
width: 70%;
172+
left: 15%;
173+
}
174+
}
175+
`;
176+
const SingleNumberContainer = styled.div`
177+
display: flex;
178+
flex-direction: column;
179+
align-items: center;
180+
text-align: center;
181+
justify-content: center;
182+
`;
183+
const NumberContainer = styled.div`
184+
display: flex;
185+
flex-direction: row;
186+
align-content: flex-end;
187+
margin: 0 auto;
188+
`;
189+
const Number = styled.h1`
190+
font-size: 3em;
191+
margin: 0;
192+
align-self: flex-end;
193+
194+
@media (${mediaQueryMin.sm}) {
195+
font-size: 5em;
196+
}
197+
@media (${mediaQueryMin.md}) {
198+
font-size: 6em;
199+
}
200+
@media (${mediaQueryMin.lg}) {
201+
font-size: 10em;
202+
}
203+
`;
204+
const NumberType = styled.h1`
205+
font-size: 1.5em;
206+
margin-bottom: 0.1em;
207+
align-self: flex-end;
208+
@media (${mediaQueryMin.sm}) {
209+
font-size: 2.5em;
210+
}
211+
@media (${mediaQueryMin.md}) {
212+
font-size: 3.5em;
213+
}
214+
@media (${mediaQueryMin.lg}) {
215+
font-size: 5em;
216+
}
217+
`;
218+
const Subtitle = styled.div`
219+
max-width: 15em;
220+
`;
221+
222+
// numbers is an array with the 3 number results, subtitles is an array of the subtitles that belong to the numbers
223+
export const ResultsAndNumbers = ({
224+
numbers,
225+
numberTypes,
226+
title,
227+
subtitles,
228+
}) => {
229+
return (
230+
<ResultsAndNumbersContainer>
231+
<TextBlockContainer>
232+
<TextBlock title={title} subtitle="Resultaten" />
233+
</TextBlockContainer>
234+
<NumbersContainer>
235+
{numbers.map((number, index) => (
236+
<SingleNumberContainer>
237+
<NumberContainer>
238+
<Number>{number}</Number>
239+
<NumberType>{numberTypes[index]}</NumberType>
240+
</NumberContainer>
241+
<Subtitle>
242+
<p>{subtitles[index]}</p>
243+
</Subtitle>
244+
</SingleNumberContainer>
245+
))}
246+
</NumbersContainer>
247+
</ResultsAndNumbersContainer>
248+
);
249+
};
250+
251+
ResultsAndNumbers.propTypes = {
252+
numbers: PropTypes.arrayOf(PropTypes.string).isRequired,
253+
numberTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
254+
subtitles: PropTypes.arrayOf(PropTypes.string).isRequired,
255+
title: PropTypes.string.isRequired,
256+
};

‎src/containers/ContentPageHeader/ContentPageHeader.components.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export const MainHeaderContent = styled.div`
8181
}
8282
8383
@media (${mediaQueryMin.md}) {
84-
margin: 2em ${containerWidth.md};
84+
margin: 0 ${containerWidth.md};
8585
width: 40vw;
8686
}
8787

‎src/containers/Credits/Credits.components.jsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import PropTypes from 'prop-types';
4+
import theme from '../../styles/theme';
5+
import ArrowButton from '../../components/ArrowButton';
6+
7+
const { mediaQueryMin } = theme;
8+
export const CreditsContainer = styled.div`
9+
width: 100vw;
10+
background-color: ${theme.colors.secondary};
11+
padding: 0;
12+
@media (${mediaQueryMin.sm}) {
13+
padding: 5em 10em 5em 10em;
14+
}
15+
`;
16+
export const TitleContainer = styled.div`
17+
padding: 3em 1em;
18+
@media (${mediaQueryMin.sm}) {
19+
padding: 3em 0;
20+
}
21+
`;
22+
export const Container = styled.div`
23+
display: grid;
24+
grid-template-columns: 1fr;
25+
26+
@media (${mediaQueryMin.sm}) {
27+
grid-template-columns: 1fr 1fr 1fr;
28+
}
29+
`;
30+
31+
export const Column = styled.div`
32+
display: flex;
33+
flex-direction: column;
34+
`;
35+
36+
export const CreditItemContainer = styled.div`
37+
margin: 1em;
38+
`;
39+
export const CreditTitle = styled.p`
40+
margin-bottom: 0.5em;
41+
`;
42+
export const CreditText = styled.p`
43+
margin-bottom: 0.5em;
44+
`;
45+
export const CreditItem = ({ title, credits }) => (
46+
<CreditItemContainer>
47+
<CreditTitle className="subtitle">{title}</CreditTitle>
48+
{credits.map(credit => (
49+
<CreditText className="Paragraph light">{credit}</CreditText>
50+
))}
51+
</CreditItemContainer>
52+
);
53+
54+
CreditItem.propTypes = {
55+
title: PropTypes.string.isRequired,
56+
credits: PropTypes.arrayOf(PropTypes.string).isRequired,
57+
};
58+
59+
export const CreditItemWithLinks = ({ title, credits, links }) => (
60+
<CreditItemContainer>
61+
<CreditTitle className="subtitle">{title}</CreditTitle>
62+
{credits.map((credit, index) => (
63+
<>
64+
<CreditText>{credit}</CreditText>
65+
<CreditText>
66+
<ArrowButton href={links[index]}>
67+
Ga naar pagina
68+
</ArrowButton>
69+
</CreditText>
70+
</>
71+
))}
72+
</CreditItemContainer>
73+
);
74+
75+
CreditItemWithLinks.propTypes = {
76+
title: PropTypes.string.isRequired,
77+
credits: PropTypes.arrayOf(PropTypes.string).isRequired,
78+
links: PropTypes.arrayOf(PropTypes.string).isRequired,
79+
};

‎src/containers/Credits/Credits.jsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {
4+
Column,
5+
Container,
6+
CreditItem,
7+
CreditItemWithLinks,
8+
CreditsContainer,
9+
TitleContainer,
10+
} from './Credits.components';
11+
12+
const Credits = ({
13+
special,
14+
resources,
15+
resourceLinks,
16+
columnOne,
17+
columnTwo,
18+
}) => (
19+
<CreditsContainer>
20+
<TitleContainer>
21+
<h2>Credits</h2>
22+
</TitleContainer>
23+
<Container>
24+
<Column>
25+
{columnOne.map(item => (
26+
<CreditItem credits={item.content} title={item.title} />
27+
))}
28+
</Column>
29+
<Column>
30+
{columnTwo.map(item => (
31+
<CreditItem credits={item.content} title={item.title} />
32+
))}
33+
</Column>
34+
<Column>
35+
<CreditItem credits={special} title="Special Thanks" />
36+
<CreditItemWithLinks
37+
credits={resources}
38+
links={resourceLinks}
39+
title="Resources"
40+
/>
41+
</Column>
42+
</Container>
43+
</CreditsContainer>
44+
);
45+
46+
Credits.propTypes = {
47+
special: PropTypes.arrayOf(PropTypes.string).isRequired,
48+
resources: PropTypes.arrayOf(PropTypes.string).isRequired,
49+
resourceLinks: PropTypes.arrayOf(PropTypes.string).isRequired,
50+
columnOne: PropTypes.arrayOf(
51+
PropTypes.shape({
52+
title: PropTypes.string.isRequired,
53+
content: PropTypes.arrayOf(PropTypes.string).isRequired,
54+
}),
55+
).isRequired,
56+
columnTwo: PropTypes.arrayOf(
57+
PropTypes.shape({
58+
title: PropTypes.string.isRequired,
59+
content: PropTypes.arrayOf(PropTypes.string).isRequired,
60+
}),
61+
).isRequired,
62+
};
63+
64+
export default Credits;

‎src/images/img/cases/fantescy/dev1.png‎

480 KB
Loading

‎src/images/img/cases/fantescy/dev2.gif‎

6.09 MB
Loading

‎src/images/img/cases/fantescy/header.png‎

1.04 MB
Loading

‎src/images/img/cases/fantescy/intro.png‎

972 KB
Loading

‎src/images/img/cases/fantescy/research.png‎

675 KB
Loading

0 commit comments

Comments
 (0)