Skip to content

Commit aa181ca

Browse files
author
Luciano Nooijen
committed
Merge branch '128-develop-new-services-page-and-sub-pages' into 'develop'
Resolve "Develop new services page and sub-pages" Closes #128 See merge request bytecode/bytecode-website!135
2 parents 1e5f5a8 + 98dfc1b commit aa181ca

23 files changed

+627
-247
lines changed

‎src/components/DigitalOceanPartnerLogo.jsx‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/containers/Service/Service.components.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,24 @@ export const ServiceIcon = styled.div`
4343
export const ServiceText = styled.div`
4444
flex: 1;
4545
`;
46+
47+
// Below are the components for the servicepage
48+
export const ServiceBackgroundImage = styled.img`
49+
overflow: visible;
50+
position: relative;
51+
bottom: 10vmin;
52+
@media (${mediaQueryMin.sm}) {
53+
bottom: 20vmin;
54+
}
55+
@media (${mediaQueryMin.md}) {
56+
bottom: 30vmin;
57+
}
58+
`;
59+
export const ServiceBackgroundContainer = styled.section`
60+
width: 100vw;
61+
height: 5em;
62+
margin-bottom: 0;
63+
@media (${mediaQueryMin.xs}) {
64+
height: 15em;
65+
}
66+
`;

‎src/containers/Service/ServiceCard.components.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import styled from 'styled-components';
2+
import theme from '../../styles/theme';
3+
import { Container, Col, Row } from '../../lib/Grid';
4+
5+
const { mediaQueryMin } = theme;
6+
7+
export const TextBlockContainer = styled(Container)`
8+
background-color: ${theme.colors.secondary};
9+
padding: 10% !important;
10+
z-index: 1;
11+
margin: 40% auto !important;
12+
@media (${mediaQueryMin.xs}) {
13+
padding: 18% !important;
14+
margin: 40% 10% !important;
15+
}
16+
@media (${mediaQueryMin.sm}) {
17+
margin: 10% 35% 10% 0 !important;
18+
padding: 10% !important;
19+
}
20+
@media (${mediaQueryMin.sm}) {
21+
margin: 10% 38% 10% 0 !important;
22+
padding: 10% !important;
23+
}
24+
25+
@media (${mediaQueryMin.lg}) {
26+
margin: 10% 45% 10% 0 !important;
27+
}
28+
`;
29+
export const ImageContainer = styled(Container)`
30+
position: absolute !important;
31+
top: 0 !important;
32+
left: 0 !important;
33+
margin: 0 !important;
34+
min-height: 100%;
35+
min-width: 100%;
36+
z-index: -1;
37+
@media (${mediaQueryMin.xs}) {
38+
top: 10% !important;
39+
}
40+
@media (${mediaQueryMin.sm}) {
41+
left: 30% !important;
42+
top: 20% !important;
43+
}
44+
45+
@media (${mediaQueryMin.md}) {
46+
margin: 0 !important;
47+
}
48+
`;
49+
50+
export const StyledRow = styled(Row)`
51+
min-height: 150vw;
52+
align-content: center;
53+
@media (${mediaQueryMin.xs}) {
54+
min-height: 100vh;
55+
}
56+
@media (${mediaQueryMin.sm}) {
57+
min-height: 100vh;
58+
}
59+
`;
60+
61+
export const StyledCol = styled(Col)`
62+
height: 150vw;
63+
@media (${mediaQueryMin.sm}) {
64+
height: auto;
65+
}
66+
`;
67+
68+
export const StyledImage = styled.img`
69+
min-width: 100%;
70+
width: auto;
71+
height: auto;
72+
@media (${mediaQueryMin.xs}) {
73+
min-width: 130%;
74+
}
75+
@media (${mediaQueryMin.sm}) {
76+
min-width: 80%;
77+
}
78+
`;

‎src/containers/Service/ServiceCard.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {
4+
StyledImage,
5+
ImageContainer,
6+
TextBlockContainer,
7+
StyledCol,
8+
StyledRow,
9+
} from './ServiceCard.components';
10+
import { Container } from '../../lib/Grid';
11+
import TextBlock from '../TextBlock/TextBlock';
12+
13+
const ServiceCard = ({ subtitle, title, text, src, link }) => (
14+
<Container>
15+
<StyledRow src={src} justify="center">
16+
<StyledCol xl={8.4}>
17+
<TextBlockContainer>
18+
<TextBlock title={title} subtitle={subtitle} href={link}>
19+
{text}
20+
</TextBlock>
21+
</TextBlockContainer>
22+
<ImageContainer>
23+
<StyledImage src={src} />
24+
</ImageContainer>
25+
</StyledCol>
26+
</StyledRow>
27+
</Container>
28+
);
29+
30+
export default ServiceCard;
31+
32+
ServiceCard.propTypes = {
33+
subtitle: PropTypes.string.isRequired,
34+
title: PropTypes.string.isRequired,
35+
text: PropTypes.string.isRequired,
36+
src: PropTypes.string.isRequired,
37+
link: PropTypes.string.isRequired,
38+
};

‎src/containers/Service/ServiceHeader.components.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import styled from 'styled-components';
2+
import theme from '../../styles/theme';
3+
import { Container, Col, Row } from '../../lib/Grid';
4+
5+
const { mediaQueryMin } = theme;
6+
7+
export const StyledImage = styled.img`
8+
max-width: 100%;
9+
max-height: 75vh;
10+
width: auto;
11+
height: auto;
12+
float: right;
13+
@media (${mediaQueryMin.sm}) {
14+
max-height: 130vh;
15+
}
16+
`;
17+
export const TextCol = styled(Col)`
18+
@media (${mediaQueryMin.sm}) {
19+
align-self: center;
20+
padding-left: 6em !important;
21+
padding-right: 6em !important;
22+
}
23+
`;
24+
25+
export const StyledContainer = styled(Container)`
26+
@media (${mediaQueryMin.sm}) {
27+
margin: 0 !important;
28+
}
29+
`;
30+
31+
export const StyledRow = styled(Row)`
32+
flex-direction: column-reverse;
33+
@media (${mediaQueryMin.sm}) {
34+
flex-direction: row;
35+
}
36+
`;

‎src/containers/Service/ServiceHeader.jsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {
4+
StyledImage,
5+
StyledRow,
6+
TextCol,
7+
StyledContainer,
8+
} from './ServiceHeader.components';
9+
import { Col } from '../../lib/Grid';
10+
import TextBlock from '../TextBlock/TextBlock';
11+
12+
const ServiceHeader = ({ title, subtitle, text, src }) => {
13+
return (
14+
<StyledContainer>
15+
<StyledRow>
16+
<TextCol xl={6}>
17+
<TextBlock title={title} subtitle={subtitle}>
18+
{text}
19+
</TextBlock>
20+
</TextCol>
21+
<Col xl={6}>
22+
<StyledImage src={src} />
23+
</Col>
24+
</StyledRow>
25+
</StyledContainer>
26+
);
27+
};
28+
export default ServiceHeader;
29+
30+
ServiceHeader.propTypes = {
31+
title: PropTypes.string.isRequired,
32+
subtitle: PropTypes.string.isRequired,
33+
text: PropTypes.string.isRequired,
34+
src: PropTypes.string.isRequired,
35+
};

‎src/containers/Service/ServiceItem.components.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import styled from 'styled-components';
2+
import theme from '../../styles/theme';
3+
import { Container, Col, Row } from '../../lib/Grid';
4+
5+
const { mediaQueryMin } = theme;
6+
7+
export const StyledImage = styled.img`
8+
max-width: 100%;
9+
height: auto;
10+
width: auto;
11+
float: right;
12+
background-color: ${theme.colors.secondary};
13+
`;
14+
15+
export const StyledContainer = styled(Container)`
16+
@media (${mediaQueryMin.sm}) {
17+
margin: ${props =>
18+
props.light || !props.src
19+
? '5em 0em 0em 3em'
20+
: '0em 0 0em 0'} !important;
21+
}
22+
23+
@media (${mediaQueryMin.md}) {
24+
margin: ${props =>
25+
props.light || !props.src
26+
? '2em 0em 3em 3em'
27+
: '0em 0 0em 0'} !important;
28+
}
29+
@media (${mediaQueryMin.lg}) {
30+
margin: ${props =>
31+
props.light || !props.src
32+
? '5em 0em 5em 3em'
33+
: '5em 0 5em 0'} !important;
34+
}
35+
`;
36+
export const StyledRow = styled(Row)`
37+
background-color: ${props =>
38+
props.light ? theme.colors.secondary : theme.colors.background};
39+
flex-direction: column-reverse;
40+
@media (${mediaQueryMin.sm}) {
41+
flex-direction: row;
42+
}
43+
min-height: 67vh;
44+
45+
@media (${mediaQueryMin.md}) {
46+
min-height: 85vh;
47+
}
48+
`;
49+
export const StyledCol = styled(Col)`
50+
align-self: center;
51+
margin: 20px 0;
52+
`;
53+
54+
export const DeliverableList = styled.p`
55+
font-family: Cousine;
56+
color: #9c9c9c;
57+
font-size: 12px;
58+
letter-spacing: 0;
59+
line-height: 1.58;
60+
max-width: 600px;
61+
`;
62+
63+
export const StyledTextBlock = styled(Container)`
64+
margin: 0 !important;
65+
padding-right: 1em !important;
66+
padding-left: 1em !important;
67+
68+
@media (${mediaQueryMin.sm}) {
69+
margin: 0 !important;
70+
padding-right: 3em !important;
71+
padding-left: 3em !important;
72+
}
73+
@media (${mediaQueryMin.md}) {
74+
margin: 0 !important;
75+
padding-left: 3em !important;
76+
padding-right: 3em !important;
77+
}
78+
@media (${mediaQueryMin.lg}) {
79+
margin: 0 !important;
80+
padding-right: 7em !important;
81+
padding-left: 7em !important;
82+
}
83+
`;
84+
85+
export const ImageCol = styled(Col)`
86+
align-self: flex-end;
87+
`;
88+
export const ListCol = styled(Col)`
89+
align-self: center;
90+
padding: 12vw !important;
91+
@media (${mediaQueryMin.xs}) {
92+
padding: 24vw !important;
93+
}
94+
@media (${mediaQueryMin.sm}) {
95+
align-self: auto;
96+
padding: 5em 6em !important;
97+
}
98+
99+
@media (${mediaQueryMin.lg}) {
100+
padding: 14em 8em !important;
101+
}
102+
`;

0 commit comments

Comments
 (0)