Skip to content

Commit 20ce1b9

Browse files
author
Jeroen van Steijn
committed
Move startup page elements to components and re-use them on the new homepage
1 parent ee410f8 commit 20ce1b9

File tree

6 files changed

+438
-392
lines changed

6 files changed

+438
-392
lines changed

‎content/posts/bytecast.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: 99
3-
title: 'Bytecast: de podcast van Bytecode'
3+
title: 'De podcast van Bytecode'
44
description: 'Elke eerste maandag van de maand brengt Bytecode een nieuwe podcastaflevering uit van de Bytecast. Luister het hier!'
55
keywords: 'podcast, bytecast, bytecode, bytecodeagency'
66
posted_on: '2 november 2020'

‎src/components/New.tsx‎

Lines changed: 366 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,366 @@
1+
import styled from 'styled-components';
2+
import InputField from '../components/InputField';
3+
import theme from '../experimental/styles/theme';
4+
import { Container, Col } from '../lib/Grid';
5+
6+
const meeting = require('../images/img/startups/meeting.jpeg');
7+
const team = require('../images/img/startups/bytecode-team.jpeg');
8+
const group = require('../images/img/startups/group.jpg');
9+
10+
const { size, height, spacing, font, weight, color, border } =
11+
theme.typography.button;
12+
const { mediaQueryMin, colors } = theme;
13+
14+
export const Header = styled.header`
15+
height: 100vh;
16+
min-height: 600px;
17+
display: flex;
18+
flex-direction: row;
19+
@media (max-width: ${theme.breakpoint.xs}) {
20+
flex-direction: column;
21+
justify-content: flex-end;
22+
}
23+
align-items: center;
24+
`;
25+
26+
export const HeaderContainer = styled(Container)`
27+
flex: 1;
28+
/* !important used to overwrite standard behaviour react-grid-system, may the code gods forgive me*/
29+
margin-top: 0 !important;
30+
margin-bottom: 0 !important;
31+
`;
32+
33+
export const HeaderContent = styled.div`
34+
grid-column: 1;
35+
flex-basis: 30%;
36+
@media (max-width: ${theme.breakpoint.sm}) {
37+
padding-bottom: 5vh;
38+
}
39+
@media (max-width: ${theme.breakpoint.lg}) {
40+
flex-basis: 60%;
41+
}
42+
`;
43+
44+
export const GridFig = styled.img`
45+
width: 7rem;
46+
position: absolute;
47+
transform: translate(-3rem, -3rem);
48+
`;
49+
50+
export const HeaderFigure = styled.figure`
51+
display: none;
52+
grid-column: 2;
53+
height: 80vh;
54+
width: 60vw;
55+
transform: translateX(5vw);
56+
@media (${mediaQueryMin.sm}) {
57+
display: block;
58+
}
59+
@media (max-width: ${theme.breakpoint.md}) {
60+
height: 75vh;
61+
width: 50vw;
62+
transform: translateX(10vw);
63+
}
64+
img {
65+
height: 100%;
66+
width: 100%;
67+
object-fit: cover;
68+
}
69+
`;
70+
71+
export const SlantedBackground = styled.div`
72+
width: 100%;
73+
height: 40vh;
74+
background-image: url(${group});
75+
opacity: 0.58;
76+
position: absolute;
77+
top: 0;
78+
left: 0;
79+
z-index: -1;
80+
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
81+
background-size: 150%;
82+
background-position: 29% 61%;
83+
@media (${mediaQueryMin.sm}) {
84+
background: #271c25;
85+
opacity: 1;
86+
clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%);
87+
/* 35rem */
88+
}
89+
`;
90+
91+
export const Process = styled.ol`
92+
display: flex;
93+
flex-direction: column;
94+
list-style-type: none;
95+
list-style-position: inside;
96+
counter-reset: elementcounter;
97+
padding-left: 0;
98+
@media (${mediaQueryMin.xs}) {
99+
width: 80%;
100+
margin: 0 auto;
101+
}
102+
@media (${mediaQueryMin.sm}) {
103+
flex-direction: row;
104+
width: 100%;
105+
padding-left: 1em;
106+
li {
107+
padding-right: 2em;
108+
p {
109+
padding-right: 4em;
110+
}
111+
}
112+
}
113+
li {
114+
flex-basis: 33%;
115+
font-size: 20px;
116+
color: ${colors.primary};
117+
position: relative;
118+
&:before {
119+
content: '0' counter(elementcounter) '. ';
120+
counter-increment: elementcounter;
121+
position: absolute;
122+
right: 1em;
123+
@media (${mediaQueryMin.sm}) {
124+
left: -2em;
125+
}
126+
}
127+
h3 {
128+
display: inline-block;
129+
}
130+
}
131+
`;
132+
133+
export const Icon = styled.img`
134+
height: 4rem;
135+
width: auto;
136+
@media (${mediaQueryMin.sm}) {
137+
height: 4rem;
138+
}
139+
`;
140+
141+
export const CircledIcon = styled(Icon)`
142+
height: 5rem;
143+
width: auto;
144+
display: block;
145+
margin: 0 auto;
146+
@media (${mediaQueryMin.xs}) {
147+
height: 5rem;
148+
}
149+
`;
150+
151+
export const IconList = styled.ul`
152+
list-style: none;
153+
margin-left: 0;
154+
transform: translateX(-0.33rem);
155+
display: flex;
156+
align-items: stretch;
157+
width: 100%;
158+
max-width: 30rem;
159+
margin: 0 0 2.66em 0;
160+
li {
161+
flex-direction: column;
162+
display: inline-flex;
163+
width: 100%;
164+
font-size: 0.8rem;
165+
text-align: center;
166+
align-items: center;
167+
justify-content: start;
168+
margin: 0;
169+
img {
170+
@media (${mediaQueryMin.sm}) {
171+
width: min-content;
172+
}
173+
}
174+
p {
175+
margin: 0;
176+
}
177+
}
178+
`;
179+
180+
export const ParallaxImage = styled.div`
181+
background-image: url(${team});
182+
min-height: 500px;
183+
width: 100%;
184+
display: block;
185+
border: none;
186+
background-attachment: fixed;
187+
background-position: center;
188+
background-repeat: no-repeat;
189+
background-size: cover;
190+
@media (${mediaQueryMin.sm}) {
191+
background-image: url(${meeting});
192+
}
193+
& img {
194+
width: 100%;
195+
height: auto;
196+
}
197+
`;
198+
199+
export const Deliverables = styled.ul`
200+
display: flex;
201+
list-style: none;
202+
text-align: center;
203+
align-items: flex-start;
204+
justify-items: center;
205+
li {
206+
display: flex;
207+
flex-direction: column;
208+
align-items: center;
209+
justify-items: center;
210+
width: 33%;
211+
212+
& > * {
213+
margin-top: 1rem;
214+
}
215+
}
216+
217+
@media (${mediaQueryMin.xs}) {
218+
margin: 0.5em 1em 0 1em;
219+
}
220+
`;
221+
222+
export const PathsRight = styled.img`
223+
display: none;
224+
position: absolute;
225+
height: 120%;
226+
width: fit-content;
227+
right: -10%;
228+
z-index: 0;
229+
@media (${mediaQueryMin.sm}) {
230+
display: block;
231+
}
232+
`;
233+
234+
export const PathsLeft = styled(PathsRight)`
235+
left: -10%;
236+
transform: scaleX(-1);
237+
`;
238+
239+
export const Card = styled.div`
240+
background: #271c25;
241+
padding: 1em;
242+
margin-top: 1em;
243+
border-radius: 0.1em;
244+
text-align: center;
245+
@media (${mediaQueryMin.xs}) {
246+
padding: 3em;
247+
margin: 0.5em;
248+
}
249+
div {
250+
position: relative;
251+
height: 5em;
252+
margin: 0 auto;
253+
}
254+
h3 {
255+
margin: 2em 0;
256+
}
257+
`;
258+
259+
export const FlexCol = styled(Col)`
260+
display: flex;
261+
`;
262+
263+
export const PathFig = styled.img`
264+
position: absolute;
265+
left: 0;
266+
top: 30%;
267+
z-index: -1;
268+
`;
269+
270+
export const Section = styled.section`
271+
position: relative;
272+
padding: 3em 0;
273+
`;
274+
275+
export const CTA = styled(Section)`
276+
background: #271c25;
277+
text-align: center;
278+
min-height: 35em;
279+
display: flex;
280+
align-items: center;
281+
overflow: hidden;
282+
position: relative;
283+
justify-content: center;
284+
padding: 10vh 2em;
285+
`;
286+
287+
export const IconCaption = styled.p`
288+
width: 90%;
289+
text-align: center;
290+
`;
291+
292+
export const NewsletterSection = styled(Section)`
293+
display: flex;
294+
justify-content: center;
295+
align-items: center;
296+
`;
297+
298+
export const NewsletterContainer = styled.div`
299+
margin-top: 2vh;
300+
padding: 10vw;
301+
text-align: center;
302+
max-width: 800px;
303+
@media (min-width: ${theme.breakpoint.md}) {
304+
padding: 3vw;
305+
}
306+
`;
307+
308+
export const NewsletterSubscribeForm = styled.form`
309+
display: grid;
310+
grid-gap: 10px;
311+
grid-template-columns: repeat(4, 1fr);
312+
grid-template-rows: 50% 50%;
313+
text-align: center;
314+
@media (max-width: ${theme.breakpoint.xs}) {
315+
display: block;
316+
}
317+
> input {
318+
grid-column: span 2;
319+
background: ${theme.colors.white};
320+
color: ${theme.colors.black};
321+
@media (max-width: ${theme.breakpoint.xs}) {
322+
grid-column: none;
323+
}
324+
}
325+
`;
326+
327+
export const NewsletterSubscribeInputField = styled(InputField)`
328+
background: ${theme.colors.secondary} !important;
329+
font-size: 16px;
330+
padding: 1em 1.33em;
331+
color: white !important;
332+
`;
333+
334+
export const NewsletterSubscribeButton = styled.button`
335+
display: inline-block;
336+
background: transparent;
337+
padding: 0.66em 2em;
338+
grid-column: 2 / span 2;
339+
border: ${border};
340+
border-radius: 5px;
341+
transition: all 0.2s ease;
342+
font-size: ${size};
343+
line-height: ${height};
344+
letter-spacing: ${spacing};
345+
font-family: ${font};
346+
font-weight: ${weight};
347+
color: ${color};
348+
text-decoration: none;
349+
margin: 1em 0;
350+
351+
@media (max-width: ${theme.breakpoint.xs}) {
352+
grid-column: none;
353+
width: 100%;
354+
}
355+
356+
&:hover {
357+
color: ${theme.colors.white};
358+
background: ${theme.colors.primary};
359+
border-color: ${theme.colors.primary};
360+
cursor: pointer;
361+
}
362+
`;
363+
364+
export const CTAContent = styled.div`
365+
max-width: 60em;
366+
`;

‎src/containers/Navbar/Navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const Navbar: React.FC<NavbarProps> = ({ background }) => {
4242
<img src={closeMenuImg} alt="Close menu" width="100%" />
4343
</CloseMenuButton>
4444
<NavbarItem href="/" text="Home" />
45-
<NavbarItem href="/services" text="Services" />
45+
<NavbarItem href="/startups" text="Services" />
4646
<NavbarItem href="/cases" text="Cases" />
4747
<NavbarItem href="/insights" text="Insights" />
4848
<NavbarItem href="/over" text="About" />

‎src/images/img/content/missie.png‎

304 KB
Loading

0 commit comments

Comments
 (0)