Skip to content

Commit e01e577

Browse files
author
Jeroen van Steijn
committed
Improve responsiveness
1 parent 8bdebd7 commit e01e577

File tree

7 files changed

+167
-73
lines changed

7 files changed

+167
-73
lines changed

‎src/components/New.tsx‎

Lines changed: 46 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import styled from 'styled-components';
3-
import InputField from '../components/InputField';
3+
import InputField from './InputField';
44
import theme from '../experimental/styles/theme';
55
import { Container, Col } from '../lib/Grid';
66
import { Subtitle } from './Typography/Typography';
@@ -10,7 +10,7 @@ const team = require('../images/img/startups/bytecode-team.jpeg');
1010
const group = require('../images/img/startups/group.jpg');
1111

1212
const { size, height, spacing, font, weight, color, border } =
13-
theme.typography.button;
13+
theme.typography.button;
1414
const { mediaQueryMin, colors } = theme;
1515

1616
export const Header = styled.header`
@@ -367,54 +367,48 @@ export const CTAContent = styled.div`
367367
max-width: 60em;
368368
`;
369369

370-
export const ProcessSteps = () => (
371-
370+
export const ProcessSteps : React.FC = () => (
372371
<Section style={{ display: 'flex', alignItems: 'center' }}>
373-
<Container>
374-
<Subtitle>Het proces</Subtitle>
375-
<h2 style={{ paddingBottom: '3em' }}>
376-
Hoe gaan we je helpen?
377-
</h2>
378-
<Process>
379-
<li>
380-
<h3>Strategie</h3>
381-
<p className="introduction">
382-
Als startup wil je innoveren en voorop lopen. De
383-
eerste stap is een strategie. Wat is je
384-
doel, hoe ga je dit bereiken en wie is je ideale gebruiker?
385-
Na ons eerste gesprek gaan we hier
386-
meteen mee aan de slag, door kwantitatief en
387-
kwalitatief onderzoek. Door creatief &
388-
innovatief te denken, creëren we de samen de juiste
389-
strategie. De basis van jouw (en dus ons) succes.
390-
</p>
391-
</li>
392-
<li>
393-
<h3>Design</h3>
394-
<p className="introduction">
395-
Wij ontwerpen een technisch hoogstaand
396-
eindproduct dat jouw idee goed overbrengt. Een
397-
interactief web design, app of platform dat
398-
passie en creativiteit uitstraalt. Daarbij hoort
399-
een geoptimaliseerde gebruikservaring en een
400-
passende user interface. Om dit te bereiken
401-
maken we regelmatig prototypes om te evalueren
402-
of het design werkt.
403-
</p>
404-
</li>
405-
<li>
406-
<h3>Development</h3>
407-
<p className="introduction">
408-
Als de basis goed is, kunnen we beginnen met het
409-
bouwen van jouw digitale idee. We zijn ooit
410-
gestart als webbureau en beschikken over de
411-
kennis en expertise om een stabiel product te
412-
bouwen dat snel getest kan worden! Jouw passie
413-
wordt werkelijkheid.
414-
</p>
415-
</li>
416-
</Process>
417-
</Container>
418-
<PathFig src={require('../images/img/startups/path.svg')} />
419-
</Section>
420-
)
372+
<Container>
373+
<Subtitle>Het proces</Subtitle>
374+
<h2 style={{ paddingBottom: '3em' }}>Hoe gaan we je helpen?</h2>
375+
<Process>
376+
<li>
377+
<h3>Strategie</h3>
378+
<p className="introduction">
379+
Als startup wil je innoveren en voorop lopen. De eerste
380+
stap is een strategie. Wat is je doel, hoe ga je dit
381+
bereiken en wie is je ideale gebruiker? Na ons eerste
382+
gesprek gaan we hier meteen mee aan de slag, door
383+
kwantitatief en kwalitatief onderzoek. Door creatief &
384+
innovatief te denken, creëren we de samen de juiste
385+
strategie. De basis van jouw (en dus ons) succes.
386+
</p>
387+
</li>
388+
<li>
389+
<h3>Design</h3>
390+
<p className="introduction">
391+
Wij ontwerpen een technisch hoogstaand eindproduct dat
392+
jouw idee goed overbrengt. Een interactief web design,
393+
app of platform dat passie en creativiteit uitstraalt.
394+
Daarbij hoort een geoptimaliseerde gebruikservaring en
395+
een passende user interface. Om dit te bereiken maken we
396+
regelmatig prototypes om te evalueren of het design
397+
werkt.
398+
</p>
399+
</li>
400+
<li>
401+
<h3>Development</h3>
402+
<p className="introduction">
403+
Als de basis goed is, kunnen we beginnen met het bouwen
404+
van jouw digitale idee. We zijn ooit gestart als
405+
webbureau en beschikken over de kennis en expertise om
406+
een stabiel product te bouwen dat snel getest kan
407+
worden! Jouw passie wordt werkelijkheid.
408+
</p>
409+
</li>
410+
</Process>
411+
</Container>
412+
<PathFig src={require('../images/img/startups/path.svg')} />
413+
</Section>
414+
);

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
import styled from 'styled-components';
22
import Button from '../../components/Button/Button';
3+
import theme from '../../styles/theme';
4+
5+
const { mediaQueryMin } = theme;
36

47
export const CenteredRow = styled.div`
58
text-align: center;
69
`;
710

811
export const StyledRow = styled.div`
912
display: grid;
10-
grid-template-columns: 3fr 5fr;
13+
grid-template-columns: 1fr;
14+
@media screen and (${mediaQueryMin.sm}) {
15+
grid-template-columns: 3fr 5fr;
16+
}
1117
max-width: 1400px;
1218
margin: auto;
1319
margin-top: 10px;
@@ -24,6 +30,7 @@ export const LeftInner = styled.div`
2430

2531
export const Left = styled.div`
2632
position: relative;
33+
min-height: 500px;
2734
`;
2835

2936
export const Right = styled.div``;

‎src/containers/Cases/Cases.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import Button from '../../components/Button/Button';
1212

1313
const dearlyImg = require('../../images/img/cases/dearly/home.png');
14-
const airchipImg = require('../../images/img/cases/airchip/airchip.png')
14+
const airchipImg = require('../../images/img/cases/airchip/airchip.png');
1515

1616
const Cases: React.FC = () => (
1717
<div>
@@ -42,7 +42,8 @@ const Cases: React.FC = () => (
4242
title="Barman in je broekzak"
4343
>
4444
Nooit meer in de rij op een festival of evenement:
45-
bestel en betaal met Airchip. Bekend van Dragon&apos;s Den!
45+
bestel en betaal met Airchip (Bekend van Dragon&apos;s
46+
Den).
4647
</TextBlock>
4748
<Button href="/case/dearly">Bekijk case</Button>
4849
</LeftInner>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ const Step = styled(Col)`
1010
}
1111
`;
1212

13-
export default Step;
13+
export default Step;

‎src/pages/case/airchip.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,11 @@ const Dearly: React.FC<Record<string, never>> = () => (
9292
via Dragon’s Den een mooie investering binnengehaald.
9393
</p>
9494
</Introduction>
95-
<TextAndImage img={header} alt="Maakt wachtrijen verledentijd" reverse>
95+
<TextAndImage
96+
img={header}
97+
alt="Maakt wachtrijen verledentijd"
98+
reverse
99+
>
96100
<h3>Doel van Airchip</h3>
97101
<p>
98102
Airchip wil het maximale halen uit de tijd die jij met

‎src/pages/home.tsx‎

Lines changed: 73 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,21 @@ import { Container, Row, Col } from '../lib/Grid';
66
import Wrapper from '../components/Wrapper';
77
import Cases from '../containers/Cases/Cases';
88
import Button from '../components/Button/Button';
9-
import { ProcessSteps, GridFig, Header, HeaderContainer, HeaderContent, HeaderFigure } from '../components/New';
9+
import {
10+
ProcessSteps,
11+
GridFig,
12+
Header,
13+
HeaderContainer,
14+
HeaderContent,
15+
HeaderFigure,
16+
CTA,
17+
CircledIcon,
18+
CTAContent,
19+
Deliverables,
20+
PathsLeft,
21+
PathsRight,
22+
} from '../components/New';
23+
import { Subtitle } from '../components/Typography/Typography';
1024

1125
const pageSettings = {
1226
title: `Technische Start-up Partner`,
@@ -32,19 +46,17 @@ const Home: React.FC<Record<string, never>> = () => (
3246
<HeaderContainer>
3347
<Header>
3448
<HeaderContent>
35-
<GridFig
36-
src={require('../images/img/startups/grid.svg')}
37-
/>
49+
<GridFig src={require('../images/img/startups/grid.svg')} />
3850
<p className="subtitle">Wij zijn Bytecode</p>
3951
<h1>Technisch verlengstuk van jouw start-up</h1>
4052
<p className="introduction">
41-
Op zoek naar een ervaren technische start-up-partner die jou kan ondersteunen met strategie, ontwerp en ontwikkeling? Van het valideren van jouw idee tot de livegang van je eerste product (MVP), wij zijn het technische verlengstuk van jouw start-up.
53+
Op zoek naar een ervaren technische start-up-partner die
54+
jou kan ondersteunen met strategie, ontwerp en
55+
ontwikkeling? Van het valideren van jouw idee tot de
56+
livegang van je eerste product (MVP), wij zijn het
57+
technische verlengstuk van jouw start-up.
4258
</p>
43-
<Button
44-
href="/cases"
45-
>
46-
Bekijk onze recente projecten
47-
</Button>
59+
<Button href="/cases">Bekijk onze recente projecten</Button>
4860
</HeaderContent>
4961
<HeaderFigure>
5062
<img src={group} alt="group of happy people" />
@@ -139,6 +151,57 @@ const Home: React.FC<Record<string, never>> = () => (
139151
</Row>
140152
</Container>
141153
</Wrapper>
154+
<CTA>
155+
<CTAContent>
156+
<Subtitle>Intake</Subtitle>
157+
<h1>Kom gratis op adviesgesprek</h1>
158+
<p className="introduction">
159+
Ons multidisciplinaire, ervaren team van strategen,
160+
designers en developers maken jouw passie werkelijkheid! Zet
161+
de eerste stap en krijg de volgende gratis deliverables na
162+
het kennismakingsgesprek:
163+
</p>
164+
<Deliverables>
165+
<li>
166+
<CircledIcon
167+
src={require('../images/img/startups/icons-round/mvp.svg')}
168+
/>
169+
<p className="caption">
170+
Scherp en kritisch advies op MVP
171+
</p>
172+
</li>
173+
<li>
174+
<CircledIcon
175+
src={require('../images/img/startups/icons-round/missie.svg')}
176+
/>
177+
<p className="caption">
178+
Deskundig en fris advies op je missie en strategie
179+
</p>
180+
</li>
181+
<li>
182+
<CircledIcon
183+
src={require('../images/img/startups/icons-round/concurrentie.svg')}
184+
/>
185+
<p className="caption">
186+
Moderne branding- en klantanalyse
187+
</p>
188+
</li>
189+
</Deliverables>
190+
<Button
191+
href="https://calendly.com/bytecode"
192+
target="_blank"
193+
rel="noopener"
194+
>
195+
Maak een afspraak!
196+
</Button>
197+
</CTAContent>
198+
<PathsRight
199+
src={require('../images/img/startups/routes/cta-right.svg')}
200+
/>
201+
<PathsLeft
202+
src={require('../images/img/startups/routes/cta-right.svg')}
203+
/>
204+
</CTA>
142205
</Layout>
143206
);
144207

‎src/pages/startups.tsx‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,33 @@ import Layout from '../experimental/layouts/StartupPageLayout/StartupPageLayout'
33
import { Subtitle } from '../components/Typography/Typography';
44
import Button from '../components/Button/Button';
55
import { Container, Row } from '../lib/Grid';
6-
import { ProcessSteps, Card, CircledIcon, CTA, CTAContent, Deliverables, FlexCol, GridFig, Header, HeaderContainer, HeaderContent, HeaderFigure, Icon, IconCaption, IconList, NewsletterContainer, NewsletterSection, NewsletterSubscribeButton, NewsletterSubscribeForm, NewsletterSubscribeInputField, ParallaxImage, PathFig, PathsLeft, PathsRight, Process, Section, SlantedBackground } from '../components/New';
7-
6+
import {
7+
ProcessSteps,
8+
Card,
9+
CircledIcon,
10+
CTA,
11+
CTAContent,
12+
Deliverables,
13+
FlexCol,
14+
GridFig,
15+
Header,
16+
HeaderContainer,
17+
HeaderContent,
18+
HeaderFigure,
19+
Icon,
20+
IconCaption,
21+
IconList,
22+
NewsletterContainer,
23+
NewsletterSection,
24+
NewsletterSubscribeButton,
25+
NewsletterSubscribeForm,
26+
NewsletterSubscribeInputField,
27+
ParallaxImage,
28+
PathsLeft,
29+
PathsRight,
30+
Section,
31+
SlantedBackground,
32+
} from '../components/New';
833

934
const pageSettings = {
1035
title: `Maatwerk Web & Mobiel Ontwikkeling`,
@@ -21,8 +46,8 @@ const Startups: React.FC = () => {
2146
const canSubmit = name !== '' && email !== '';
2247
const stateChanger =
2348
(setter: React.Dispatch<React.SetStateAction<string>>) =>
24-
(e: React.ChangeEvent<HTMLInputElement>) =>
25-
setter(e.target.value);
49+
(e: React.ChangeEvent<HTMLInputElement>) =>
50+
setter(e.target.value);
2651

2752
return (
2853
<Layout pageSettings={pageSettings}>
@@ -101,8 +126,8 @@ const Startups: React.FC = () => {
101126
Wie ben je en hoe verhoud je je tot je
102127
concurrenten? Dit zijn cruciale vragen,
103128
waarmee je boven je concurrenten uit kunt
104-
steken. Met onze visie en analyse zetten we hier samen
105-
grote stappen in.{' '}
129+
steken. Met onze visie en analyse zetten we
130+
hier samen grote stappen in.{' '}
106131
</p>
107132
</Card>
108133
</FlexCol>

0 commit comments

Comments
 (0)