Skip to content

Commit 078435d

Browse files
SamSverkoSamSverko
authored
Merge pull request #109 from EQWorks/EQ-99-Index/Build-section-5
EQ-99 index/build section 5
2 parents d4fec00 + 8af9c6a commit 078435d

17 files changed

+265
-205
lines changed

‎components/index/better-understand.js

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import styled from 'styled-components'
22

33
const SectionStyled = styled.section`
4-
margin: 0 auto;
4+
margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto;
55
max-width: ${({ theme }) => theme.width.page};
66
@media ${({ theme }) => theme.breakpoint.md} {
7-
padding: ${({ theme }) => theme.spacing[5]}px 0;
7+
padding: 0 ${({ theme }) => theme.spacing[2]}px;
88
}
99
.image-bar {
1010
background-color: ${({ theme }) => theme.color.greyMedium};
@@ -25,7 +25,7 @@ const SectionStyled = styled.section`
2525
display: block;
2626
}
2727
@media ${({ theme }) => theme.breakpoint.lg} {
28-
padding: 0 ${({ theme }) => theme.spacing[5]}px;
28+
padding: 0 ${({ theme }) => theme.spacing[8]}px;
2929
}
3030
.image {
3131
background-color: ${({ theme }) => theme.color.greyMedium};
@@ -34,20 +34,19 @@ const SectionStyled = styled.section`
3434
}
3535
}
3636
.right {
37-
padding: ${({ theme }) => theme.spacing[5]}px
38-
${({ theme }) => theme.spacing[3]}px;
37+
padding: ${({ theme }) => theme.spacing[8]}px
38+
${({ theme }) => theme.spacing[2]}px 0
39+
${({ theme }) => theme.spacing[2]}px;
3940
text-align: center;
4041
@media ${({ theme }) => theme.breakpoint.md} {
41-
padding: ${({ theme }) => theme.spacing[5]}px
42-
${({ theme }) => theme.spacing[3]}px
43-
${({ theme }) => theme.spacing[5]}px 0;
42+
padding: 0 ${({ theme }) => theme.spacing[2]}px 0 0;
4443
text-align: left;
4544
}
4645
h2 {
47-
margin: 0 auto ${({ theme }) => theme.spacing[3]}px auto;
46+
margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto;
4847
text-transform: uppercase;
4948
@media ${({ theme }) => theme.breakpoint.md} {
50-
margin: 0 0 ${({ theme }) => theme.spacing[3]}px 0;
49+
margin: 0 0 ${({ theme }) => theme.spacing[2]}px 0;
5150
max-width: 400px;
5251
}
5352
}
@@ -61,16 +60,16 @@ const SectionStyled = styled.section`
6160
.divider {
6261
background-color: ${({ theme }) => theme.color.blue};
6362
height: 5px;
64-
margin: 0 auto ${({ theme }) => theme.spacing[3]}px auto;
63+
margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto;
6564
width: 100px;
6665
@media ${({ theme }) => theme.breakpoint.md} {
67-
margin: 0 0 ${({ theme }) => theme.spacing[3]}px 0;
66+
margin: 0 0 ${({ theme }) => theme.spacing[2]}px 0;
6867
}
6968
}
7069
.paragraph-1 {
71-
margin: 0 auto ${({ theme }) => theme.spacing[3]}px auto;
70+
margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto;
7271
@media ${({ theme }) => theme.breakpoint.md} {
73-
margin: 0 0 ${({ theme }) => theme.spacing[3]}px 0;
72+
margin: 0 0 ${({ theme }) => theme.spacing[2]}px 0;
7473
}
7574
}
7675
}

‎components/index/eq-advantage.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import styled from 'styled-components'
2+
3+
const SectionStyled = styled.section`
4+
color: ${({ theme }) => theme.color.black};
5+
margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto;
6+
max-width: ${({ theme }) => theme.width.page};
7+
padding: 0 ${({ theme }) => theme.spacing[2]}px;
8+
text-align: center;
9+
h2 {
10+
margin: 0 0 ${({ theme }) => theme.spacing[4]}px 0;
11+
text-transform: uppercase;
12+
}
13+
.items {
14+
align-items: flex-start;
15+
display: flex;
16+
flex-wrap: wrap;
17+
justify-content: space-around;
18+
.item {
19+
max-width: 250px;
20+
margin: ${({ theme }) => theme.spacing[2]}px
21+
${({ theme }) => theme.spacing[2]}px
22+
${({ theme }) => theme.spacing[4]}px
23+
${({ theme }) => theme.spacing[2]}px;
24+
}
25+
}
26+
`
27+
28+
export default function EQAdvantage() {
29+
return (
30+
<SectionStyled>
31+
<h2>The EQ Advantage</h2>
32+
<div className='items'>
33+
<div className='item'>
34+
<img
35+
alt='Brain icon'
36+
src='/images/index/fallback/eq-advantage-1.png'
37+
/>
38+
<p>Purely Canadian tech stack with our DSP Atom & DMP&nbsp;Locus</p>
39+
</div>
40+
<div className='item'>
41+
<img
42+
alt='Avatar icon'
43+
src='/images/index/fallback/eq-advantage-2.png'
44+
/>
45+
<p>
46+
Mastercard partnership gives ability to create custom segments with
47+
actionable&nbsp;insights
48+
</p>
49+
</div>
50+
<div className='item'>
51+
<img
52+
alt='Computer with charts icon'
53+
src='/images/index/fallback/eq-advantage-3.png'
54+
/>
55+
<p>Inherently Insights-Driven Data Machine&nbsp;Learning</p>
56+
</div>
57+
<div className='item'>
58+
<img
59+
alt='Trophy icon'
60+
src='/images/index/fallback/eq-advantage-4.png'
61+
/>
62+
<p>Award winning in-house Creative Studio</p>
63+
</div>
64+
</div>
65+
</SectionStyled>
66+
)
67+
}

‎components/index/hero.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ const SectionStyled = styled.section`
1010
box-sizing: border-box;
1111
height: calc(100vh - ${({ theme }) => theme.height.navBar});
1212
justify-content: center;
13-
padding: 0 ${({ theme }) => theme.spacing[3]}px;
13+
margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto;
14+
padding: 0 ${({ theme }) => theme.spacing[2]}px;
1415
text-align: center;
1516
@media ${({ theme }) => theme.breakpoint.sm} {
1617
height: 100vh;
@@ -54,17 +55,17 @@ const SectionStyled = styled.section`
5455
border: 2px solid ${({ theme }) => theme.color.white};
5556
border-radius: 100%;
5657
display: flex;
57-
margin: 0 ${({ theme }) => theme.spacing[3]}px 0 0;
58+
margin: 0 ${({ theme }) => theme.spacing[2]}px 0 0;
5859
}
5960
svg {
6061
color: ${({ theme }) => theme.color.white};
61-
padding: ${({ theme }) => theme.spacing[2]}px;
62+
padding: ${({ theme }) => theme.spacing[1]}px;
6263
width: 20px;
6364
}
6465
}
6566
}
6667
.subtitle-1 {
67-
margin: 0 auto ${({ theme }) => theme.spacing[3]}px auto;
68+
margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto;
6869
}
6970
}
7071
.video-container {

‎components/index/location-data.js

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import Head from 'next/head'
21
import Slider from 'react-slick'
32
import styled from 'styled-components'
43

54
const SectionStyled = styled.section`
65
color: ${({ theme }) => theme.color.white};
7-
padding: ${({ theme }) => theme.spacing[5]}px 0;
6+
margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto;
7+
padding: 0;
88
.container {
99
background-color: ${({ theme }) => theme.color.blue};
1010
box-sizing: border-box;
1111
.content {
1212
box-sizing: border-box;
1313
margin: 0 auto;
1414
max-width: ${({ theme }) => theme.width.page};
15-
padding: ${({ theme }) => theme.spacing[5]}px
16-
${({ theme }) => theme.spacing[3]}px;
15+
padding: ${({ theme }) => theme.spacing[8]}px
16+
${({ theme }) => theme.spacing[2]}px;
1717
text-align: center;
1818
h2 {
1919
margin: 0 auto;
@@ -61,7 +61,7 @@ const SectionStyled = styled.section`
6161
}
6262
.left {
6363
@media ${({ theme }) => theme.breakpoint.sm} {
64-
padding: 0 ${({ theme }) => theme.spacing[3]}px 0 0;
64+
padding: 0 ${({ theme }) => theme.spacing[2]}px 0 0;
6565
}
6666
@media ${({ theme }) => theme.breakpoint.sm} {
6767
padding: 0 ${({ theme }) => theme.spacing[4]}px 0 0;
@@ -73,7 +73,7 @@ const SectionStyled = styled.section`
7373
justify-content: center;
7474
margin: 0 0 ${({ theme }) => theme.spacing[4]}px 0;
7575
img {
76-
margin: 0 ${({ theme }) => theme.spacing[3]}px 0 0;
76+
margin: 0 ${({ theme }) => theme.spacing[2]}px 0 0;
7777
max-width: 150px;
7878
width: 100%;
7979
@media ${({ theme }) => theme.breakpoint.xs} {
@@ -90,14 +90,14 @@ const SectionStyled = styled.section`
9090
}
9191
.right {
9292
@media ${({ theme }) => theme.breakpoint.sm} {
93-
padding: 0 0 0 ${({ theme }) => theme.spacing[3]}px;
93+
padding: 0 0 0 ${({ theme }) => theme.spacing[2]}px;
9494
}
9595
@media ${({ theme }) => theme.breakpoint.sm} {
9696
padding: 0 0 0 ${({ theme }) => theme.spacing[4]}px;
9797
}
9898
}
9999
.screenshot {
100-
margin: 0 0 ${({ theme }) => theme.spacing[5]}px 0;
100+
margin: 0 0 ${({ theme }) => theme.spacing[8]}px 0;
101101
.screenshot-image {
102102
border-radius: 10px;
103103
max-width: 400px;
@@ -179,20 +179,6 @@ export default function LocationData() {
179179

180180
return (
181181
<SectionStyled>
182-
<Head>
183-
<link
184-
charSet='UTF-8'
185-
href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'
186-
rel='stylesheet'
187-
type='text/css'
188-
/>
189-
<link
190-
href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'
191-
rel='stylesheet'
192-
type='text/css'
193-
/>
194-
</Head>
195-
196182
<div className='shape'>
197183
<svg
198184
height='100%'

0 commit comments

Comments
 (0)