Skip to content

Commit 5905cf1

Browse files
richardvanthofrichardvanthof
committed
Centered the CTA and footer section correctly
1 parent dcabd66 commit 5905cf1

File tree

2 files changed

+60
-55
lines changed

2 files changed

+60
-55
lines changed

‎src/experimental/containers/Footer/Footer.components.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ export const FooterCol = styled.div`
2626

2727
export const FooterLogo = styled.img`
2828
transform: translateX(-1.5rem);
29-
max-width: 60vw;
29+
max-width: 40vw;
3030
height: 100%;
31-
padding: 0.75em;
31+
padding: 1em;
3232
width: auto;
3333
@media (${mediaQueryMin.md}) {
3434
max-width: unset;
@@ -57,7 +57,7 @@ export const FooterHeadingContainer = styled.div`
5757
margin-bottom: 0;
5858
}
5959
@media (${mediaQueryMin.sm}) {
60-
height: 5rem;
60+
height: 4.66rem;
6161
display: flex;
6262
align-items: end;
6363
}
@@ -87,7 +87,7 @@ export const FooterContainer = styled.section`
8787
padding: 3em ${container.md} 0 ${container.md};
8888
}
8989
@media screen and (${mediaQueryMin.lg}) {
90-
padding: 3em ${container.lg} 0 1em;
90+
padding: 3em ${container.lg} 0 ${container.lg};
9191
}
9292
@media screen and (${mediaQueryMin.xl}) {
9393
padding: 3em ${container.xl} 0 ${container.xl};

‎src/pages/startups.tsx‎

Lines changed: 56 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ const Process = styled.ol`
6767
padding-left: 1em;
6868
li {
6969
padding-right: 2em;
70+
p {
71+
padding-right: 4em;
72+
}
7073
}
7174
}
7275
li {
@@ -303,6 +306,8 @@ const CTA = styled(Section)`
303306
align-items: center;
304307
overflow: hidden;
305308
position: relative;
309+
justify-content: center;
310+
padding: 10vh 2em;
306311
`;
307312

308313
const IconCaption = styled.p`
@@ -382,6 +387,10 @@ const NewsletterSubscribeButton = styled.button`
382387
}
383388
`;
384389

390+
const CTAContent = styled.div`
391+
max-width: 60em;
392+
`;
393+
385394
const HeaderContent = styled.div`
386395
grid-column: 1;
387396
flex-basis: 30%;
@@ -527,11 +536,11 @@ const Startups: React.FC = () => {
527536
>
528537
<Container>
529538
<Subtitle>Het proces</Subtitle>
530-
<h2>Hoe gaan we je helpen?</h2>
539+
<h2 style={{paddingBottom: '3em'}}>Hoe gaan we je helpen?</h2>
531540
<Process>
532541
<li>
533542
<h3>Strategie</h3>
534-
<p>
543+
<p className="introduction">
535544
Als startup wil je innoveren en voorop lopen. De
536545
eerste stap is een online strategie. Wat is je doel,
537546
hoe ga je dit bereiken en wie wil je bereiken? Na
@@ -543,7 +552,7 @@ const Startups: React.FC = () => {
543552
</li>
544553
<li>
545554
<h3>Design</h3>
546-
<p>
555+
<p className="introduction">
547556
Wij ontwerpen een technisch hoogstaand eindproduct
548557
dat jouw idee goed overbrengt. Een interactief web
549558
design, app of platform dat passie en creativiteit
@@ -555,7 +564,7 @@ const Startups: React.FC = () => {
555564
</li>
556565
<li>
557566
<h3>Development</h3>
558-
<p>
567+
<p className="introduction">
559568
Als de basis goed is, kunnen we beginnen met het
560569
bouwen van jouw digitale idee. We zijn ooit gestart
561570
als webbureau en beschikken over de kennis en
@@ -568,54 +577,50 @@ const Startups: React.FC = () => {
568577
<PathFig src={require('../images/img/startups/path.svg')} />
569578
</Section>
570579
<CTA>
571-
<Container style={{ zIndex: 2 }}>
572-
<Row>
573-
<Col md={8} lg={6} offset={{ md: 2, lg: 3 }}>
574-
<Subtitle>Intake</Subtitle>
575-
<h1>Kom gratis op adviesgesprek</h1>
576-
<p className="introduction">
577-
Ons multidisciplinaire, ervaren team van strategen,
578-
designers en developers maken jouw passie
579-
werkelijkheid! Zet de eerste stap en krijg de
580-
volgende gratis deliverables na het
581-
kennismakingsgesprek:
580+
<CTAContent>
581+
<Subtitle>Intake</Subtitle>
582+
<h1>Kom gratis op adviesgesprek</h1>
583+
<p className="introduction">
584+
Ons multidisciplinaire, ervaren team van strategen,
585+
designers en developers maken jouw passie
586+
werkelijkheid! Zet de eerste stap en krijg de
587+
volgende gratis deliverables na het
588+
kennismakingsgesprek:
589+
</p>
590+
<Deliverables>
591+
<li>
592+
<CircledIcon
593+
src={require('../images/img/startups/icons-round/mvp.svg')}
594+
/>
595+
<p className="caption">
596+
Scherp en kritisch advies op MVP
582597
</p>
583-
<Deliverables>
584-
<li>
585-
<CircledIcon
586-
src={require('../images/img/startups/icons-round/mvp.svg')}
587-
/>
588-
<p className="caption">
589-
Scherp en kritisch advies op MVP
590-
</p>
591-
</li>
592-
<li>
593-
<CircledIcon
594-
src={require('../images/img/startups/icons-round/missie.svg')}
595-
/>
596-
<p className="caption">
597-
Deskundig en fris advies op je missie en
598-
strategie
599-
</p>
600-
</li>
601-
<li>
602-
<CircledIcon
603-
src={require('../images/img/startups/icons-round/concurrentie.svg')}
604-
/>
605-
<p className="caption">
606-
Moderne branding- en klantanalyse
607-
</p>
608-
</li>
609-
</Deliverables>
610-
<Button
611-
href="https://calendly.com/bytecode"
612-
target="_blank"
613-
rel="noopener">
614-
Maak een afspraak!
615-
</Button>
616-
</Col>
617-
</Row>
618-
</Container>
598+
</li>
599+
<li>
600+
<CircledIcon
601+
src={require('../images/img/startups/icons-round/missie.svg')}
602+
/>
603+
<p className="caption">
604+
Deskundig en fris advies op je missie en
605+
strategie
606+
</p>
607+
</li>
608+
<li>
609+
<CircledIcon
610+
src={require('../images/img/startups/icons-round/concurrentie.svg')}
611+
/>
612+
<p className="caption">
613+
Moderne branding- en klantanalyse
614+
</p>
615+
</li>
616+
</Deliverables>
617+
<Button
618+
href="https://calendly.com/bytecode"
619+
target="_blank"
620+
rel="noopener">
621+
Maak een afspraak!
622+
</Button>
623+
</CTAContent>
619624
<PathsRight
620625
src={require('../images/img/startups/routes/cta-right.svg')}
621626
/>

0 commit comments

Comments
 (0)