Skip to content

Commit 0397d61

Browse files
author
Jeroen van Steijn
committed
WIP
1 parent f672e81 commit 0397d61

File tree

8 files changed

+124
-64
lines changed

8 files changed

+124
-64
lines changed

‎src/containers/Cases/Cases.components.ts‎

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 Button from '../../components/Button/Button';
3+
4+
export const CenteredRow = styled.div`
5+
text-align: center;
6+
`
7+
8+
export const StyledRow = styled.div`
9+
display: grid;
10+
grid-template-columns: 3fr 5fr;
11+
max-width: 1400px;
12+
margin: auto;
13+
margin-top: 10px;
14+
background: rgb(37,28,36);
15+
`
16+
17+
export const LeftInner = styled.div`
18+
position: absolute;
19+
top: 50%;
20+
transform: translateY(-50%);
21+
padding-left: 80px;
22+
max-width: 90%;
23+
`
24+
25+
export const Left = styled.div`
26+
position: relative;
27+
`;
28+
29+
export const Right = styled.div`
30+
31+
`;
32+
33+
export const StyledButton = styled(Button)`
34+
width: 450px;
35+
padding: 10px;
36+
`;

‎src/containers/Cases/Cases.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import TextBlock from '../TextBlock/TextBlock';
3+
import { Left, Right, LeftInner, StyledRow, CenteredRow, StyledButton } from './Cases.components';
4+
import Button from '../../components/Button/Button';
5+
6+
const dearlyImg = require('../../images/img/cases/dearly/home.png');
7+
8+
const Cases: React.FC = () => (
9+
<div>
10+
<StyledRow>
11+
<Left>
12+
<LeftInner>
13+
<TextBlock subtitle="Dearly" headingType="h3" title="Ondersteuning bij rouwverwerking">
14+
Een nieuwe mobiele rouwapp voor persoonlijke ondersteuning en maatschappelijke ontwikkeling
15+
</TextBlock>
16+
<Button href="/case/dearly">
17+
Bekijk case
18+
</Button>
19+
</LeftInner>
20+
</Left>
21+
<Right>
22+
<img src={dearlyImg} alt="" />
23+
</Right>
24+
</StyledRow>
25+
<StyledRow>
26+
<Left>
27+
<LeftInner>
28+
<TextBlock subtitle="Airchip" headingType="h3" title="Barman in je broekzak">
29+
Nooit meer in de rij op een festival of evenement: bestel en betaal met Airchip. Bekend van Dragon's Den!
30+
</TextBlock>
31+
<Button href="/case/dearly">
32+
Bekijk case
33+
</Button>
34+
</LeftInner>
35+
</Left>
36+
<Right>
37+
<img src={dearlyImg} alt="" />
38+
</Right>
39+
</StyledRow>
40+
<CenteredRow>
41+
<StyledButton href="/cases">Bekijk meer cases</StyledButton>
42+
</CenteredRow>
43+
</div>
44+
);
45+
46+
export default Cases;

‎src/containers/Process/Process.components.ts‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,3 @@ export const Step = styled(Col)`
99
margin: 0 2em;
1010
}
1111
`;
12-
13-
export const ProcessStepImage = styled.img`
14-
margin: 5rem 5rem 5rem 3rem;
15-
height: 400px;
16-
width: auto;
17-
text-align: center;
18-
@media (${mediaQueryMin.xs}) {
19-
margin-bottom: 4em;
20-
}
21-
@media (${mediaQueryMin.sm}) {
22-
width: 50%;
23-
}
24-
`;

‎src/containers/Process/Process.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import TextBlock from '../TextBlock/TextBlock';
33
import { Container, Row } from '../../lib/Grid';
4-
import { ProcessStepImage, Step } from './Process.components';
4+
import { Step } from './Process.components';
55

66
const step1 = require('../../images/img/content/workflow/analyze.svg');
77
const step2 = require('../../images/img/content/workflow/strategize.svg');
@@ -11,8 +11,7 @@ const Process: React.FC<Record<string, never>> = () => (
1111
<Container>
1212
<Row gutterWidth={30}>
1313
<Step md={5.55} lg={3.55}>
14-
<ProcessStepImage src={step1} alt="Analyze" />
15-
<TextBlock subtitle="Stap 1" headingType="h3" title="Analyze">
14+
<TextBlock subtitle="01." headingType="h3" title="Advies">
1615
Voordat we starten met ontwikkelen, maken we eerst een
1716
gedetailleerde analyse. Dit stelt ons in staat om een helder
1817
en volledig overzicht te krijgen van de huidige situatie.
@@ -21,11 +20,10 @@ const Process: React.FC<Record<string, never>> = () => (
2120
</TextBlock>
2221
</Step>
2322
<Step md={5.55} lg={3.55}>
24-
<ProcessStepImage src={step2} alt="Strategize" />
2523
<TextBlock
26-
subtitle="Stap 2"
24+
subtitle="02."
2725
headingType="h3"
28-
title="Strategize"
26+
title="Strategie"
2927
>
3028
Vervolgens maken wij een duidelijke strategie, waarin we
3129
uiteenzetten welke punten we aan gaan pakken en vooral op
@@ -36,8 +34,7 @@ const Process: React.FC<Record<string, never>> = () => (
3634
</TextBlock>
3735
</Step>
3836
<Step md={5.55} lg={3.55}>
39-
<ProcessStepImage src={step3} alt="Realize" />
40-
<TextBlock subtitle="Stap 3" headingType="h3" title="Realize">
37+
<TextBlock subtitle="03." headingType="h3" title="Technische uitvoering">
4138
Nadat we alles helemaal hebben geanalyseerd en gepland, is
4239
het tijd om de handen uit de mouwen te steken en het plan te
4340
realiseren. Hierbij werken we volgens de scrum-methode. Op

‎src/containers/TextBlock/TextBlock.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
H4,
88
StyledButton,
99
StyledSubtitle,
10+
TextBlockContainer,
1011
} from './TextBlock.components';
1112
interface ImageProps {
1213
src?: string;

‎src/images/img/cases/dearly/home.png‎

259 KB
Loading

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

78.6 KB
Loading

‎src/pages/home.tsx‎

Lines changed: 36 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,8 @@ import TextBlock from '../containers/TextBlock/TextBlock';
55
import ContentPageHeader from '../containers/ContentPageHeader/ContentPageHeader';
66
import { Container, Row, Col } from '../lib/Grid';
77
import Process from '../containers/Process/Process';
8-
import Thumbnail from '../containers/Thumbnails/Thumbnail';
98
import Wrapper from '../components/Wrapper';
10-
11-
const service1icon = require('../images/icons/services/mobile.svg');
12-
const service2icon = require('../images/icons/services/cloud.svg');
13-
const service3icon = require('../images/icons/services/api.svg');
14-
const service4icon = require('../images/icons/services/design.svg');
15-
const service1bg = require('../images/img/services/mobile.jpg');
16-
const service2bg = require('../images/img/services/servers.jpg');
17-
const service3bg = require('../images/img/services/code.jpeg');
18-
const service4bg = require('../images/img/services/design.jpg');
9+
import Cases from '../containers/Cases/Cases';
1910

2011
const pageSettings = {
2112
title: `Technische Start-up Partner`,
@@ -52,41 +43,13 @@ const Home: React.FC<Record<string, never>> = () => (
5243
<Row>
5344
<Col md={12} lg={6} xl={6}>
5445
<Row gutterWidth={20}>
55-
<Col sm={6}>
56-
<Thumbnail
57-
serviceName="Websites, Webshops en Webapps"
58-
serviceIcon={service1icon}
59-
backgroundImage={service1bg}
60-
/>
61-
</Col>
62-
<Col sm={6}>
63-
<Thumbnail
64-
serviceName="Cloud en Automatisering"
65-
serviceIcon={service2icon}
66-
backgroundImage={service2bg}
67-
/>
68-
</Col>
69-
<Col sm={6}>
70-
<Thumbnail
71-
serviceName="Mobile- en API-ontwikkeling"
72-
serviceIcon={service3icon}
73-
backgroundImage={service3bg}
74-
/>
75-
</Col>
76-
<Col sm={6}>
77-
<Thumbnail
78-
serviceName="Design en Strategie"
79-
serviceIcon={service4icon}
80-
backgroundImage={service4bg}
81-
/>
82-
</Col>
8346
</Row>
8447
</Col>
8548
<CenterAlignedCol offset={{ lg: 1 }} md={12} lg={5}>
8649
<TextBlock
8750
useGatsbyLink
88-
subtitle="Hoe Bytecode kan helpen"
89-
title="Van inzicht tot impact"
51+
subtitle="Onze missie"
52+
title="Samen maken we ideeen tastbaar"
9053
href="/services"
9154
button="Bekijk onze diensten"
9255
headingType="h2"
@@ -107,9 +70,8 @@ const Home: React.FC<Record<string, never>> = () => (
10770
<CenterAlignedCol md={12} lg={5}>
10871
<TextBlock
10972
useGatsbyLink
110-
subtitle="Wie wij zijn"
111-
title="
112-
Kennis en kwaliteit met een no-bullshit mentaliteit"
73+
subtitle="Wat wij doen"
74+
title="Van inzicht tot impact"
11375
href="/over"
11476
button="Meer over ons team"
11577
headingType="h2"
@@ -133,6 +95,37 @@ const Home: React.FC<Record<string, never>> = () => (
13395
</Container>
13496
</Wrapper>
13597
<Process />
98+
<Cases />
99+
<Wrapper>
100+
<Container>
101+
<Row justify="center" align="center">
102+
<CenterAlignedCol md={12} lg={5}>
103+
<TextBlock
104+
useGatsbyLink
105+
subtitle="Ons proces"
106+
title="Jouw weg naar een waardevol product"
107+
href="/over"
108+
button="Meer over ons team"
109+
headingType="h2"
110+
>
111+
Wij staan voor een eerlijke en open samenwerking,
112+
binnen ons team en daarbuiten. Door onze
113+
multidisciplinaire kennis versterken we elkaar en
114+
delen we onze ervaringen. Zo werken we naar nieuwe
115+
manieren en inzichten om de digitale wereld naar
116+
jouw hand te zetten.
117+
</TextBlock>
118+
</CenterAlignedCol>
119+
<Col offset={{ lg: 1 }} md={12} lg={6}>
120+
<GroupImage
121+
width="700"
122+
src={require('../images/img/content/process.png')}
123+
alt="Onze mindset"
124+
/>
125+
</Col>
126+
</Row>
127+
</Container>
128+
</Wrapper>
136129
</Layout>
137130
);
138131

0 commit comments

Comments
 (0)