Skip to content

Commit 2105b11

Browse files
author
Tiko
committed
created dearly case and changed ResultsAndNumbers to fit muplitple different amount of numbers
1 parent eb96a16 commit 2105b11

File tree

7 files changed

+186
-11
lines changed

7 files changed

+186
-11
lines changed

src/containers/ContentBlocks/ContentBlocks.tsx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -135,17 +135,18 @@ const TextBlockContainer = styled.div`
135135
width: 30em;
136136
}
137137
`;
138+
138139
const NumbersContainer = styled.div`
139-
display: grid;
140-
grid-template-columns: 1fr;
140+
display: flex;
141141
margin: 30px;
142-
justify-content: center;
142+
justify-content: space-around;
143143
z-index: 1;
144144
position: relative;
145145
height: 25em;
146+
flex-direction: column;
146147
@media (${mediaQueryMin.sm}) {
147148
height: 20em;
148-
grid-template-columns: 1fr 1fr 1fr;
149+
flex-direction: row;
149150
}
150151
151152
&:before {
@@ -164,19 +165,19 @@ const NumbersContainer = styled.div`
164165
}
165166
}
166167
`;
168+
const NumberContainer = styled.div`
169+
display: flex;
170+
flex-direction: row;
171+
align-content: flex-end;
172+
margin: 0 auto;
173+
`;
167174
const SingleNumberContainer = styled.div`
168175
display: flex;
169176
flex-direction: column;
170177
align-items: center;
171178
text-align: center;
172179
justify-content: center;
173180
`;
174-
const NumberContainer = styled.div`
175-
display: flex;
176-
flex-direction: row;
177-
align-content: flex-end;
178-
margin: 0 auto;
179-
`;
180181
const Number = styled.h1`
181182
font-size: 3em;
182183
margin: 0;
@@ -195,7 +196,7 @@ const Number = styled.h1`
195196
const NumberType = styled.h1`
196197
font-size: 1.5em;
197198
margin-bottom: 0.1em;
198-
align-self: flex-end;
199+
align-self: center;
199200
@media (${mediaQueryMin.sm}) {
200201
font-size: 2.5em;
201202
}
122 KB
Loading
672 KB
Loading
44.9 KB
Loading
125 KB
Loading
476 KB
Loading

src/pages/case/dearly.tsx

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import React from 'react';
2+
import Layout from '../../layouts/CaseLayout';
3+
import {
4+
TextAndImage,
5+
Introduction,
6+
Section,
7+
ResultsAndNumbers,
8+
} from '../../containers/ContentBlocks/ContentBlocks';
9+
import Deliverables from '../../containers/Deliverables';
10+
import Credits from '../../containers/Credits/Credits';
11+
import Gallery from '../../containers/Gallery';
12+
import PostThumbnail from '../../containers/Thumbnails/PostThumbnail';
13+
14+
const header = require('../../images/img/cases/dearly/header.png');
15+
const intro = require('../../images/img/cases/dearly/intro.png');
16+
const rouwen = require('../../images/img/cases/dearly/rouwen.png');
17+
const app = require('../../images/img/cases/dearly/app.png');
18+
const automatisering = require('../../images/img/cases/dearly/json-ts-checks.png');
19+
20+
const dawny = require('../../images/img/cases/dawny/usecase.png');
21+
const coteetciel = require('../../images/img/cases/cote-et-ciel/homepage.png');
22+
const sungevity = require('../../images/img/cases/sungevity/header.jpg');
23+
24+
const pageSettings = {
25+
title: 'Ondersteuning bij rouwverwerking',
26+
client: 'dearly',
27+
clientBio: '', // TODO: add client bio
28+
description:
29+
'Een nieuwe mobiele rouwapp voor persoonlijke ondersteuning en maatschappelijke ontwikkeling',
30+
keywords: '', // TODO: add keywords
31+
image: header,
32+
};
33+
34+
const creditColumnOne = [
35+
{
36+
title: 'Beheerpaneel',
37+
content: ["T'iko Alarcon Rivero", 'Julian van Dijk', 'Luciano Nooijen'],
38+
},
39+
{
40+
title: 'App',
41+
content: ['Christiaan Farber', 'Luciano Nooijen', 'Jeroen van Steijn'],
42+
},
43+
];
44+
const creditColumnTwo = [
45+
{
46+
title: 'Back-end',
47+
content: ['Luciano Nooijen', 'Jeroen van Steijn'],
48+
},
49+
{
50+
title: 'Infrastructuur',
51+
content: ['Luciano Nooijen', 'Jeroen van Steijn'],
52+
},
53+
];
54+
55+
const Dearly: React.FC<Record<string, never>> = () => (
56+
<Layout pageSettings={pageSettings}>
57+
<TextAndImage
58+
padded
59+
img={intro}
60+
alt="Dearly, ondersteuning voor, tijden en na het verlies van een dierbare"
61+
>
62+
<h3>De eerste rouwapp ter wereld</h3>
63+
<p>
64+
Dearly is een rouwapp waarin lotgenoten elkaar kunnen vinden om
65+
over hun ervaringen en verlies te praten, professionele
66+
rouwcoaches kunnen contacteren en informatieve artikelen kunnen
67+
lezen.
68+
</p>
69+
<p>
70+
Wij hebben in samenwerking met het team van Dearly deze
71+
waardevolle app mogen ontwikkelen. Daarnaast hebben we advies
72+
gegeven over de functionaliteiten, bijvoorbeeld over de meest
73+
optimale vorm van de chat-functie. Samen met designer Yarne
74+
Sluimer konden we deze functionaliteiten volledig tot hun recht
75+
laten komen.
76+
</p>
77+
</TextAndImage>
78+
<Deliverables
79+
deliverables={[
80+
'Advies',
81+
'Schaalbare software- en cloudarchitectuur',
82+
'Ontwikkeling server en app',
83+
'Applicatie-monitoring en analytics',
84+
'Grootschalige automatisering',
85+
'Veiligheid van data gewaarborgd',
86+
'Plan voor doorontwikkeling',
87+
]}
88+
/>
89+
<Section>
90+
<Introduction>
91+
<h3>Dearly</h3>
92+
<p className="Paragraph Big (introduction)">
93+
Dearly is opgericht door Quirine Wissink en Pieter van der
94+
Oest, die maar al te goed weten hoe het is om een dierbare
95+
te verliezen. Beide founders verloren één van hun ouders. Ze
96+
herkenden dat ze niet de enigen waren die zich na een tijdje
97+
alleen en/of onbegrepen voelen. Ze vielen in een zwart gat.
98+
Op basis van deze ervaring besloten ze een app te
99+
ontwikkelen om dit gat te vullen.{' '}
100+
</p>
101+
<p className="Paragraph Big (introduction)">
102+
Het is heel vet dat Dearly in deze pre-launch-fase al veel
103+
media-aandacht krijgt, zoals in dit artikel van{' '}
104+
<a
105+
href="https://www.parool.nl/ps/
106+
samen-rouwen-met-app-dearly-een-veilige-plek-voor-gedeelde-smart~bbc8bda2/"
107+
>
108+
Het Parool
109+
</a>
110+
. We verwachten dat Dearly eind 2020 succesvol gelanceerd
111+
kan worden, waarna het in de app-stores te vinden is.
112+
</p>
113+
</Introduction>
114+
<TextAndImage img={rouwen} alt="Maak rouwen bespreekbaar" reverse>
115+
<h3>Maak rouwen bespreekbaar</h3>
116+
<p>
117+
Helaas is rouw nog steeds een taboe. Op de werkvloer wordt
118+
het onderwerp bijvoorbeeld nog regelmatig vermeden.
119+
Rouwenden voelen zich vaak alleen. De Dearly app draagt bij
120+
aan ondersteuning op persoonlijk vlak en de ontwikkeling op
121+
maatschappelijk vlak. Wij geloven enorm in de visie dat rouw
122+
bespreekbaar wordt en willen aan de bestaande en eventuele
123+
nieuwe functies blijven ontwikkelen, ook nadat de app live
124+
staat.
125+
</p>
126+
</TextAndImage>
127+
</Section>
128+
<Section>
129+
<TextAndImage img={app} alt="Dearly app" padded>
130+
<h3>De MVP</h3>
131+
<p>
132+
Voor de MVP hadden we een aantal belangrijke functies
133+
ontwikkeld. De app was klaar om live te gaan. Toch hebben we
134+
de app verder bijgeschaafd, zodat deze direct fijner was in
135+
gebruik. De app is nu in de eerste versie en zal steeds
136+
verbeterd blijven worden. Zo bereiken we dat straks iedereen
137+
die daar behoefte aan heeft steun kan vinden in een
138+
duidelijke, intuïtieve en gebruiksvriendelijke app.
139+
</p>
140+
</TextAndImage>
141+
<TextAndImage
142+
img={automatisering}
143+
alt="Automatisering en runtime json type-checking"
144+
reverse
145+
padded
146+
>
147+
<h3>Automatisering</h3>
148+
<p>
149+
Nieuwe versies van de serverapplicatie worden automatisch
150+
getest en live gezet zonder downtime. De app wordt voor
151+
zowel iOS als Android automatisch in de cloud gebuild,
152+
waarna alleen nog de bestanden geüpload hoeven te worden om
153+
een nieuwe versie uit te brengen.
154+
</p>
155+
<h3>Runtime JSON type-checking</h3>
156+
<p>
157+
Om meer veiligheid te hebben rondom API-calls, hebben we
158+
gekozen om tijdens runtime de types te valideren op basis
159+
van Typescript interfaces. Luciano legt deze functionaliteit
160+
hier in detail uit.
161+
</p>
162+
</TextAndImage>
163+
</Section>
164+
<Section>
165+
<ResultsAndNumbers
166+
numbers={['20', '100']}
167+
numberTypes={['minuten', '+']}
168+
subtitles={['van code review naar productie', 'Beta testers']}
169+
title="Cijfers tot nu toe"
170+
/>
171+
</Section>
172+
</Layout>
173+
);
174+
export default Dearly;

0 commit comments

Comments
 (0)