Skip to content

Commit fddd8f9

Browse files
larsnietlarsniet
committed
Created extended newsletter, changed theme and layout
1 parent 7b1b937 commit fddd8f9

File tree

5 files changed

+203
-40
lines changed

5 files changed

+203
-40
lines changed

‎src/containers/NewsletterSubscribeExtended/NewsletterSubscribeExtended.components.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import styled from 'styled-components';
2+
import theme from '../../styles/extended/theme';
3+
import InputField from '../../components/InputField';
4+
5+
const { size, height, spacing, font, weight, color, border } = theme.typography.button;
6+
7+
export const NewsletterSubscribeExtendedContainer = styled.div`
8+
margin-top: 2vh;
9+
padding: 10vw;
10+
text-align: center;
11+
max-width: 800px;
12+
@media (min-width: ${theme.breakpoint.md}) {
13+
padding: 3vw;
14+
}
15+
`;
16+
17+
export const NewsletterSubscribeExtendedForm = styled.form`
18+
display: grid;
19+
grid-gap: 10px;
20+
grid-template-columns: repeat(4, 1fr);
21+
grid-template-rows: 50% 50%;
22+
text-align: center;
23+
@media (max-width: ${theme.breakpoint.xs}) {
24+
display: block;
25+
}
26+
> input {
27+
grid-column: span 2;
28+
background: ${theme.colors.white};
29+
color: ${theme.colors.black};
30+
@media (max-width: ${theme.breakpoint.xs}) {
31+
grid-column: none;
32+
}
33+
}
34+
`;
35+
36+
export const NewsletterSubscribeExtendedInputField = styled(InputField)`
37+
background: ${theme.colors.secondary} !important;
38+
font-size: 16px;
39+
padding: 1em 1.33em;
40+
color: white !important;
41+
`;
42+
43+
export const SubscribeExtendedButton = styled.button`
44+
display: inline-block;
45+
background: transparent;
46+
padding: 0.66em 2em;
47+
grid-column: 2 / span 2;
48+
border: ${border};
49+
border-radius: 5px;
50+
transition: all 0.2s ease;
51+
font-size: ${size};
52+
line-height: ${height};
53+
letter-spacing: ${spacing};
54+
font-family: ${font};
55+
font-weight: ${weight};
56+
color: ${color};
57+
text-decoration: none;
58+
margin: 1em 0;
59+
60+
@media (max-width: ${theme.breakpoint.xs}) {
61+
grid-column: none;
62+
width: 100%;
63+
}
64+
65+
&:hover {
66+
color: ${theme.colors.white};
67+
background: ${theme.colors.primary};
68+
border-color: ${theme.colors.primary};
69+
cursor: pointer;
70+
}
71+
`;
72+

‎src/containers/NewsletterSubscribeExtended/NewsletterSubscribeExtended.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React, { useState } from 'react';
2+
import { Subtitle } from '../../components/Typography/Typography';
3+
import {
4+
NewsletterSubscribeExtendedContainer,
5+
NewsletterSubscribeExtendedForm,
6+
NewsletterSubscribeExtendedInputField,
7+
SubscribeExtendedButton,
8+
} from './NewsletterSubscribeExtended.components';
9+
10+
interface ContainerProps {
11+
children: React.ReactNode;
12+
}
13+
const Container: React.FC<ContainerProps> = ({ children }) => {
14+
return (
15+
<NewsletterSubscribeExtendedContainer>{children}</NewsletterSubscribeExtendedContainer>
16+
);
17+
};
18+
19+
const NewsletterSubscribeExtended: React.FC = () => {
20+
const [name, setName] = useState('');
21+
const [email, setEmail] = useState('');
22+
23+
const stateChanger = (
24+
setter: React.Dispatch<React.SetStateAction<string>>
25+
) => (e: React.ChangeEvent<HTMLInputElement>) => setter(e.target.value);
26+
const canSubmit = name !== '' && email !== '';
27+
28+
return (
29+
<Container>
30+
<Subtitle>Nieuwsbrief</Subtitle>
31+
<h3 style={{ margin: ".66em 0" }}>Abonneer je op onze nieuwsbrief</h3>
32+
<p style={{ margin: "2em 0" }}>
33+
Maandelijks brengen wij een interessante en leerzame nieuwsbrief
34+
uit met onder andere onze ‘Bytecast’, nieuwe artikelen of
35+
e-books, en natuurlijk updates over ons team en werkzaamheden.
36+
</p>
37+
<NewsletterSubscribeExtendedForm
38+
action="https://bytecode.us4.list-manage.com/Subscribe/post"
39+
method="POST"
40+
noValidate
41+
>
42+
<input
43+
type="hidden"
44+
name="u"
45+
value="8442e1debdc9af183ff9fdc66"
46+
/>
47+
<input type="hidden" name="id" value="ae42f56e38" />
48+
<NewsletterSubscribeExtendedInputField
49+
type="text"
50+
name="MERGE1"
51+
id="MERGE1"
52+
placeholder="Naam"
53+
onChange={stateChanger(setName)}
54+
value={name}
55+
/>
56+
<NewsletterSubscribeExtendedInputField
57+
type="text"
58+
name="MERGE0"
59+
id="MERGE0"
60+
placeholder="E-mailadres"
61+
onChange={stateChanger(setEmail)}
62+
value={email}
63+
/>
64+
<SubscribeExtendedButton
65+
type="submit"
66+
disabled={!canSubmit}
67+
value="SubscribeExtended"
68+
name="SubscribeExtended"
69+
id="mc-embedded-SubscribeExtended"
70+
>
71+
Abonneer
72+
</SubscribeExtendedButton>
73+
</NewsletterSubscribeExtendedForm>
74+
</Container>
75+
);
76+
};
77+
78+
export default NewsletterSubscribeExtended;

‎src/layouts/FooterExtended/FooterExtended.components.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export const FooterContainer = styled.section`
9292
@media screen and (${mediaQueryMin.xl}) {
9393
padding: 3em ${container.xl} 0 ${container.xl};
9494
}
95-
background: ${theme.colors.background};
95+
background: ${theme.colors.secondary};
9696
`;
9797

9898
export const Copyright = styled(FooterContainer)`

‎src/pages/startups.tsx‎

Lines changed: 49 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import styled from 'styled-components';
33
import Layout from '../layouts/MainLayoutExtended/MainLayout';
44
import { Subtitle } from '../components/Typography/Typography';
5+
import NewsletterSubscribeExtended from '../containers/NewsletterSubscribeExtended/NewsletterSubscribeExtended';
56
import Button from '../components/Button/Button';
67
import { Container, Row, Col } from '../lib/Grid';
78
import theme from '../styles/extended/theme';
@@ -40,6 +41,7 @@ const Process = styled.ol`
4041
padding-left: 0;
4142
@media (${mediaQueryMin.xs}) {
4243
width: 80%;
44+
margin:0 auto;
4345
}
4446
@media (${mediaQueryMin.sm}) {
4547
flex-direction: row;
@@ -69,17 +71,6 @@ const Process = styled.ol`
6971
}
7072
`;
7173

72-
const CTA = styled.section`
73-
background: #271c25;
74-
text-align: center;
75-
padding: 3em 0;
76-
min-height: 35em;
77-
display: flex;
78-
align-items: center;
79-
overflow: hidden;
80-
position: relative;
81-
`;
82-
8374
const Icon = styled.img`
8475
height: 4rem;
8576
width: auto;
@@ -162,7 +153,7 @@ const HeaderFigure = styled.figure`
162153
left: 10vw;
163154
}
164155
img {
165-
height: 80%;
156+
height: 60%;
166157
width: 100%;
167158
object-fit: cover;
168159
transform: scale(1.8);
@@ -288,6 +279,17 @@ const PathFig = styled.img`
288279

289280
const Section = styled.section`
290281
position: relative;
282+
padding: 3em 0;
283+
`;
284+
285+
const CTA = styled(Section)`
286+
background: #271c25;
287+
text-align: center;
288+
min-height: 35em;
289+
display: flex;
290+
align-items: center;
291+
overflow: hidden;
292+
position: relative;
291293
`;
292294

293295
const IconCaption = styled.p`
@@ -305,6 +307,12 @@ const HeaderRow = styled(Row)`
305307
}
306308
`;
307309

310+
const NewsletterSection = styled(Section)`
311+
display: flex;
312+
justify-content: center;
313+
align-items: center;
314+
`;
315+
308316
const Startups = () => (
309317
<Layout pageSettings={pageSettings}>
310318
<Header>
@@ -361,31 +369,27 @@ const Startups = () => (
361369
</HeaderContainer>
362370
<SlantedBackground />
363371
</Header>
364-
<section style={{ marginBottom: '10em' }}>
372+
<Section style={{ paddingTop: 0 }}>
365373
<Container>
366374
<Row>
367-
<FlexCol style={{ alignItems: 'left' }} xs={12} sm={6} md={4}>
375+
<FlexCol style={{ alignItems: 'left' }} xs={12} sm={6} lg={4}>
368376
<Card>
369377
<div>
370378
<CircledIcon
371-
src={require('../images/img/startups/icons-round/mvp.svg')}
379+
src={require('../images/img/startups/icons-round/concurrentie.svg')}
372380
/>
373381
</div>
374-
<h3>MVP-advies</h3>
382+
<h3>Branding & concurrentie</h3>
375383
<p>
376-
De MVP is de eerste versie van je product. Die
377-
wil je zo snel mogelijk afhebben zodat je je
378-
idee kunt gaan testen en tractie en omzet kunt
379-
genereren. Hierdoor kun je je concept
380-
doorontwikkelen en mogelijke investeerders
381-
overtuigen! Wij geven daarom scherp advies over
382-
hoe het product gebouwd moet worden en welke
383-
onderdelen het beste op korte en lange termijn
384-
ontwikkeld kunnen worden.
384+
Wie ben je en hoe verhoud je je tot je
385+
concurrenten? Dit zijn cruciale vragen, waarmee
386+
je boven je concurrenten uit kunt steken. Met
387+
onze moderne branding- en concurrentieanalyse
388+
zetten we hier samen een grote stap in.{' '}
385389
</p>
386390
</Card>
387391
</FlexCol>
388-
<FlexCol xs={12} sm={6} md={4}>
392+
<FlexCol xs={12} sm={6} lg={4}>
389393
<Card>
390394
<div>
391395
<CircledIcon
@@ -403,31 +407,35 @@ const Startups = () => (
403407
</p>
404408
</Card>
405409
</FlexCol>
406-
<FlexCol xs={12} md={4}>
410+
<FlexCol xs={12} lg={4}>
407411
<Card>
408412
<div>
409413
<CircledIcon
410-
src={require('../images/img/startups/icons-round/concurrentie.svg')}
414+
src={require('../images/img/startups/icons-round/mvp.svg')}
411415
/>
412416
</div>
413-
<h3>Branding & concurrentie</h3>
417+
<h3>MVP-advies</h3>
414418
<p>
415-
Wie ben je en hoe verhoud je je tot je
416-
concurrenten? Dit zijn cruciale vragen, waarmee
417-
je boven je concurrenten uit kunt steken. Met
418-
onze moderne branding- en concurrentieanalyse
419-
zetten we hier samen een grote stap in.{' '}
419+
De MVP is de eerste versie van je product. Die
420+
wil je zo snel mogelijk afhebben zodat je je
421+
idee kunt gaan testen en tractie en omzet kunt
422+
genereren. Hierdoor kun je je concept
423+
doorontwikkelen en mogelijke investeerders
424+
overtuigen! Wij geven daarom scherp advies over
425+
hoe het product gebouwd moet worden en welke
426+
onderdelen het beste op korte en lange termijn
427+
ontwikkeld kunnen worden.
420428
</p>
421429
</Card>
422430
</FlexCol>
423431
</Row>
424432
</Container>
425-
</section>
426-
<section>
433+
</Section>
434+
<Section>
427435
<ParallaxImage />
428-
</section>
436+
</Section>
429437
<Section
430-
style={{ padding: '15vh 0', display: 'flex', alignItems: 'center' }}
438+
style={{ display: 'flex', alignItems: 'center' }}
431439
>
432440
<Container>
433441
<Subtitle>Het proces</Subtitle>
@@ -522,6 +530,9 @@ const Startups = () => (
522530
src={require('../images/img/startups/routes/cta-right.svg')}
523531
/>
524532
</CTA>
533+
<NewsletterSection>
534+
<NewsletterSubscribeExtended />
535+
</NewsletterSection>
525536
</Layout >
526537
);
527538

‎src/styles/extended/theme.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ type TypographyElement = {
6464
font?: string;
6565
weight?: number;
6666
color?: string;
67+
border?: string;
6768
marginTop?: string;
6869
marginBottom?: string;
6970
marginLeft?: string;
@@ -284,7 +285,8 @@ const bytecode: Bytecode = {
284285
spacing: 'normal',
285286
font: paragraph,
286287
weight: regular,
287-
color: red,
288+
color: white,
289+
border: '.1rem solid' + red,
288290
},
289291
menuitem: {
290292
size: '1.125rem',

0 commit comments

Comments
 (0)