Skip to content

Commit 6b49ff5

Browse files
author
Jeroen van Steijn
committed
Improve responsiveness
1 parent cfd80f4 commit 6b49ff5

File tree

10 files changed

+94
-42
lines changed

10 files changed

+94
-42
lines changed

‎src/components/Button/Button.components.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import theme from '../../styles/theme';
44

55
const { size, height, spacing, font, weight, color } = theme.typography.button;
66

7-
const buttonStyle = css<{ disabled?: boolean }>`
7+
const buttonStyle = css<{ disabled?: boolean; wide?: boolean }>`
88
display: inline-block;
99
background: transparent;
1010
padding: 0.66em 2em;
@@ -20,6 +20,8 @@ const buttonStyle = css<{ disabled?: boolean }>`
2020
font-weight: ${weight};
2121
color: ${color};
2222
text-decoration: none;
23+
${(props) => props.wide && 'width: 450px;'};
24+
${(props) => props.wide && 'margin: 100px 0;'};
2325
&:hover {
2426
color: ${(props) =>
2527
props.disabled ? theme.colors.tertiary : theme.colors.white};
@@ -37,6 +39,6 @@ export const StyledGatsbyButton = styled(Link)<{ disabled?: boolean }>`
3739
export const StyledButton = styled.button<{ disabled?: boolean }>`
3840
${buttonStyle}
3941
`;
40-
export const StyledAnchor = styled.a<{ disabled?: boolean }>`
42+
export const StyledAnchor = styled.a<{ disabled?: boolean; wide?: boolean }>`
4143
${buttonStyle}
4244
`;

‎src/components/Button/Button.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const Button: React.FC<ButtonProps> = ({
1414
target,
1515
onClick,
1616
disabled,
17+
wide,
1718
children,
1819
}) => {
1920
if (useGatsbyLink) {
@@ -38,7 +39,13 @@ const Button: React.FC<ButtonProps> = ({
3839
);
3940
}
4041
return (
41-
<StyledAnchor href={href} rel={rel} target={target} onClick={onClick}>
42+
<StyledAnchor
43+
wide={wide}
44+
href={href}
45+
rel={rel}
46+
target={target}
47+
onClick={onClick}
48+
>
4249
{children}
4350
</StyledAnchor>
4451
);

‎src/components/Button/Button.types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export interface ButtonProps {
77
submit?: boolean;
88
target?: string;
99
onClick?: () => void;
10+
wide?: boolean;
1011
disabled?: boolean;
1112
children: React.ReactNode;
1213
}

‎src/components/New.tsx‎

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import theme from '../experimental/styles/theme';
55
import { Container, Col } from '../lib/Grid';
66
import { Subtitle } from './Typography/Typography';
77

8-
const meeting = require('../images/img/startups/meeting.jpeg');
8+
const meeting = require('../images/img/content/teamv2.png');
99
const team = require('../images/img/startups/bytecode-team.jpeg');
1010
const group = require('../images/img/startups/group.jpg');
1111

@@ -25,6 +25,10 @@ export const Header = styled.header`
2525
align-items: center;
2626
`;
2727

28+
export const IdeaContainer = styled(Container)`
29+
margin: 50px 0;
30+
`;
31+
2832
export const HeaderContainer = styled(Container)`
2933
flex: 1;
3034
/* !important used to overwrite standard behaviour react-grid-system, may the code gods forgive me*/
@@ -367,15 +371,15 @@ export const CTAContent = styled.div`
367371
max-width: 60em;
368372
`;
369373

370-
export const ProcessSteps : React.FC = () => (
374+
export const ProcessSteps: React.FC = () => (
371375
<Section style={{ display: 'flex', alignItems: 'center' }}>
372376
<Container>
373377
<Subtitle>Het proces</Subtitle>
374378
<h2 style={{ paddingBottom: '3em' }}>Hoe gaan we je helpen?</h2>
375379
<Process>
376380
<li>
377381
<h3>Strategie</h3>
378-
<p className="introduction">
382+
<p>
379383
Als startup wil je innoveren en voorop lopen. De eerste
380384
stap is een strategie. Wat is je doel, hoe ga je dit
381385
bereiken en wie is je ideale gebruiker? Na ons eerste
@@ -387,7 +391,7 @@ export const ProcessSteps : React.FC = () => (
387391
</li>
388392
<li>
389393
<h3>Design</h3>
390-
<p className="introduction">
394+
<p>
391395
Wij ontwerpen een technisch hoogstaand eindproduct dat
392396
jouw idee goed overbrengt. Een interactief web design,
393397
app of platform dat passie en creativiteit uitstraalt.
@@ -399,7 +403,7 @@ export const ProcessSteps : React.FC = () => (
399403
</li>
400404
<li>
401405
<h3>Development</h3>
402-
<p className="introduction">
406+
<p>
403407
Als de basis goed is, kunnen we beginnen met het bouwen
404408
van jouw digitale idee. We zijn ooit gestart als
405409
webbureau en beschikken over de kennis en expertise om
@@ -412,3 +416,43 @@ export const ProcessSteps : React.FC = () => (
412416
<PathFig src={require('../images/img/startups/path.svg')} />
413417
</Section>
414418
);
419+
420+
export const ProcessStepsHome: React.FC = () => (
421+
<Section style={{ display: 'flex', alignItems: 'center' }}>
422+
<Container>
423+
<Process>
424+
<li>
425+
<h3>Advies</h3>
426+
<p>
427+
Aan de hand van jouw idee kiezen we de meest geschikte
428+
uitwerking. Heb je bijvoorbeeld een webapp of mobiele
429+
app nodig? Ook geven we advies over businessen
430+
verdienmodellen, en denken we mee over het verkrijgen
431+
van financiering.
432+
</p>
433+
</li>
434+
<li>
435+
<h3>Strategie</h3>
436+
<p>
437+
Welke functionaliteiten bieden waarde voor jouw
438+
gebruikers? Hoe ga jij je positioneren in de markt? We
439+
voorzien je van strategische hulp over bijvoorbeeld jouw
440+
MVP, het lanceren van jouw product en het verzamelen van
441+
feedback.
442+
</p>
443+
</li>
444+
<li>
445+
<h3>Technische Uitvoering</h3>
446+
<p>
447+
We werken “lean” en flexibel toe naar een stabiele en
448+
kwalitatieve eerste versie van jouw product (MVP). Jouw
449+
idee kan getest worden, waarna we de focus tijdens
450+
ontwikkeling op de meest belangrijke functionaliteiten
451+
kunnen leggen.
452+
</p>
453+
</li>
454+
</Process>
455+
</Container>
456+
<PathFig src={require('../images/img/startups/path.svg')} />
457+
</Section>
458+
);

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import styled from 'styled-components';
2-
import Button from '../../components/Button/Button';
32
import theme from '../../styles/theme';
43

54
const { mediaQueryMin } = theme;
@@ -34,8 +33,3 @@ export const Left = styled.div`
3433
`;
3534

3635
export const Right = styled.div``;
37-
38-
export const StyledButton = styled(Button)`
39-
width: 450px;
40-
padding: 10px;
41-
`;

‎src/containers/Cases/Cases.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
LeftInner,
77
StyledRow,
88
CenteredRow,
9-
StyledButton,
109
} from './Cases.components';
1110
import Button from '../../components/Button/Button';
1211

@@ -52,7 +51,9 @@ const Cases: React.FC = () => (
5251
</Right>
5352
</StyledRow>
5453
<CenteredRow>
55-
<StyledButton href="/cases">Bekijk meer cases</StyledButton>
54+
<Button wide href="/cases">
55+
Bekijk meer cases
56+
</Button>
5657
</CenteredRow>
5758
</div>
5859
);

‎src/images/img/cases/airchip/airchip.png‎

875 Bytes
Loading

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

17.8 KB
Loading

‎src/pages/home.tsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ import Wrapper from '../components/Wrapper';
77
import Cases from '../containers/Cases/Cases';
88
import Button from '../components/Button/Button';
99
import {
10-
ProcessSteps,
10+
ProcessStepsHome,
1111
GridFig,
1212
Header,
1313
HeaderContainer,
14+
IdeaContainer,
1415
HeaderContent,
1516
HeaderFigure,
1617
CTA,
@@ -49,7 +50,7 @@ const Home: React.FC<Record<string, never>> = () => (
4950
<GridFig src={require('../images/img/startups/grid.svg')} />
5051
<p className="subtitle">Wij zijn Bytecode</p>
5152
<h1>Technisch verlengstuk van jouw start-up</h1>
52-
<p className="introduction">
53+
<p>
5354
Op zoek naar een ervaren technische start-up-partner die
5455
jou kan ondersteunen met strategie, ontwerp en
5556
ontwikkeling? Van het valideren van jouw idee tot de
@@ -63,7 +64,7 @@ const Home: React.FC<Record<string, never>> = () => (
6364
</HeaderFigure>
6465
</Header>
6566
</HeaderContainer>
66-
<Container>
67+
<IdeaContainer>
6768
<Row>
6869
<Col md={12} lg={6} xl={6}>
6970
<Row gutterWidth={20}>
@@ -74,21 +75,20 @@ const Home: React.FC<Record<string, never>> = () => (
7475
<TextBlock
7576
useGatsbyLink
7677
subtitle="Onze missie"
77-
title="Samen maken we ideeen tastbaar"
78+
title="Samen maken we ideeën tastbaar"
7879
href="/services"
7980
button="Bekijk onze diensten"
8081
headingType="h2"
8182
>
82-
Wij ontwikkelen maatwerksoftware op basis van verkregen
83-
inzichten en onderzoek, zodat onze digitale producten
84-
impact maken op jouw organisatie en klanten. Handmatig,
85-
tijdrovend werk wordt verleden tijd. Jij kan je volledig
86-
focussen op datgene waar jij passie voor hebt. Zo maken
87-
we jouw visie realiteit.
83+
Ons doel is simpel. Wij willen ideeën laten slagen. Jij
84+
hebt een passie, wij hebben de mensen, middelen en
85+
technieken om samen jouw passie werkelijkheid te laten
86+
worden. Een stabiel en kwalitatief hoogwaardig product
87+
is daarom essentieel.
8888
</TextBlock>
8989
</CenterAlignedCol>
9090
</Row>
91-
</Container>
91+
</IdeaContainer>
9292
<Wrapper>
9393
<Container>
9494
<Row justify="center" align="center">
@@ -101,12 +101,12 @@ const Home: React.FC<Record<string, never>> = () => (
101101
button="Meer over ons team"
102102
headingType="h2"
103103
>
104-
Wij staan voor een eerlijke en open samenwerking,
105-
binnen ons team en daarbuiten. Door onze
106-
multidisciplinaire kennis versterken we elkaar en
107-
delen we onze ervaringen. Zo werken we naar nieuwe
108-
manieren en inzichten om de digitale wereld naar
109-
jouw hand te zetten.
104+
Bij een start-up komt veel kijken. Gelukkig hebben
105+
wij dit proces al vaak doorlopen. Daarmee hebben we
106+
de kennis en ervaring om niet alleen een technische
107+
uitwerking te verzorgen, maar jou ook echt te
108+
adviseren, begeleiden en een stabiel “minimal viable
109+
product” (MVP) neer te zetten.
110110
</TextBlock>
111111
</CenterAlignedCol>
112112
<Col offset={{ lg: 1 }} md={12} lg={6}>
@@ -119,7 +119,7 @@ const Home: React.FC<Record<string, never>> = () => (
119119
</Row>
120120
</Container>
121121
</Wrapper>
122-
<ProcessSteps />
122+
<ProcessStepsHome />
123123
<Cases />
124124
<Wrapper>
125125
<Container>
@@ -133,7 +133,10 @@ const Home: React.FC<Record<string, never>> = () => (
133133
button="Meer over ons team"
134134
headingType="h2"
135135
>
136-
Wij ondersteunen start-ups in elke fase van hun groeiproces. Hierin doorlopen we een aantal stappen, afgestemd op jouw behoeften en de fase waarin jouw start-up zich bevindt.
136+
Wij ondersteunen start-ups in elke fase van hun
137+
groeiproces. Hierin doorlopen we een aantal stappen,
138+
afgestemd op jouw behoeften en de fase waarin jouw
139+
start-up zich bevindt.
137140
</TextBlock>
138141
</CenterAlignedCol>
139142
<Col offset={{ lg: 1 }} md={12} lg={6}>
@@ -162,23 +165,23 @@ const Home: React.FC<Record<string, never>> = () => (
162165
src={require('../images/img/startups/icons-round/mvp.svg')}
163166
/>
164167
<p className="caption">
165-
Scherp en kritisch advies op MVP
168+
Scherp en kritisch advies op MVP scoping
166169
</p>
167170
</li>
168171
<li>
169172
<CircledIcon
170173
src={require('../images/img/startups/icons-round/missie.svg')}
171174
/>
172175
<p className="caption">
173-
Deskundig en fris advies op je missie en strategie
176+
Deskundige en frisse kijk op je missie en strategie
174177
</p>
175178
</li>
176179
<li>
177180
<CircledIcon
178181
src={require('../images/img/startups/icons-round/concurrentie.svg')}
179182
/>
180183
<p className="caption">
181-
Moderne branding- en klantanalyse
184+
Moderne branding- en doelgroepanalyse
182185
</p>
183186
</li>
184187
</Deliverables>

‎src/pages/startups.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const pageSettings = {
3737
keywords: 'bytecode, digital agency',
3838
};
3939

40-
const group = require('../images/img/startups/group.jpg');
40+
const group = require('../images/img/startups/bytecode-team.jpeg');
4141

4242
const Startups: React.FC = () => {
4343
const [name, setName] = useState('');
@@ -194,15 +194,15 @@ const Startups: React.FC = () => {
194194
src={require('../images/img/startups/icons-round/mvp.svg')}
195195
/>
196196
<p className="caption">
197-
Scherp en kritisch advies op MVP
197+
Scherp en kritisch advies op MVP scoping
198198
</p>
199199
</li>
200200
<li>
201201
<CircledIcon
202202
src={require('../images/img/startups/icons-round/missie.svg')}
203203
/>
204204
<p className="caption">
205-
Deskundig en fris advies op je missie en
205+
Deskundige en frisse kijk op je missie en
206206
strategie
207207
</p>
208208
</li>
@@ -211,7 +211,7 @@ const Startups: React.FC = () => {
211211
src={require('../images/img/startups/icons-round/concurrentie.svg')}
212212
/>
213213
<p className="caption">
214-
Moderne branding- en klantanalyse
214+
Moderne branding- en doelgroepanalyse
215215
</p>
216216
</li>
217217
</Deliverables>

0 commit comments

Comments
 (0)