diff --git a/components/index/hero.js b/components/index/hero.js
index f396095a..eb58ab45 100644
--- a/components/index/hero.js
+++ b/components/index/hero.js
@@ -22,16 +22,8 @@ const SectionStyled = styled.section`
justify-content: center;
z-index: ${({ theme }) => theme.zIndex.pageContent};
h1 {
- font-size: 2em;
margin: 0 0 ${({ theme }) => theme.spacing[4]}px 0;
text-transform: uppercase;
- @media ${({ theme }) => theme.breakpoint.xs} {
- font-size: 2.5em;
- }
- @media ${({ theme }) => theme.breakpoint.sm} {
- line-height: 1em;
- font-size: 3em;
- }
}
p {
max-width: ${({ theme }) => theme.width.article};
diff --git a/components/index/location-data.js b/components/index/location-data.js
new file mode 100644
index 00000000..3d21dc93
--- /dev/null
+++ b/components/index/location-data.js
@@ -0,0 +1,278 @@
+import Head from 'next/head'
+import Slider from 'react-slick'
+import styled from 'styled-components'
+
+const SectionStyled = styled.section`
+ color: ${({ theme }) => theme.color.white};
+ padding: ${({ theme }) => theme.spacing[5]}px 0;
+ .container {
+ background-color: ${({ theme }) => theme.color.blue};
+ box-sizing: border-box;
+ .content {
+ box-sizing: border-box;
+ margin: 0 auto;
+ max-width: ${({ theme }) => theme.width.page};
+ padding: ${({ theme }) => theme.spacing[5]}px
+ ${({ theme }) => theme.spacing[3]}px;
+ text-align: center;
+ h2 {
+ margin: 0 auto;
+ max-width: 750px;
+ text-transform: uppercase;
+ }
+ .carousel {
+ box-sizing: border-box;
+ .item {
+ align-items: center;
+ box-sizing: border-box;
+ display: flex !important;
+ flex-direction: column;
+ justify-content: center;
+ padding: 20px;
+ .message {
+ margin: 0;
+ max-width: 150px;
+ }
+ .title {
+ font-size: 2em;
+ font-weight: ${({ theme }) => theme.font.regular};
+ }
+ }
+ }
+ .image-globe {
+ width: 100%;
+ }
+ .products {
+ margin: -100px 0 0 0;
+ @media ${({ theme }) => theme.breakpoint.xs} {
+ margin: -150px 0 0 0;
+ }
+ @media ${({ theme }) => theme.breakpoint.sm} {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ margin: -175px 0 0 0;
+ }
+ @media ${({ theme }) => theme.breakpoint.md} {
+ margin: -200px 0 0 0;
+ }
+ @media ${({ theme }) => theme.breakpoint.md} {
+ margin: -250px 0 0 0;
+ }
+ .left {
+ @media ${({ theme }) => theme.breakpoint.sm} {
+ padding: 0 ${({ theme }) => theme.spacing[3]}px 0 0;
+ }
+ @media ${({ theme }) => theme.breakpoint.sm} {
+ padding: 0 ${({ theme }) => theme.spacing[4]}px 0 0;
+ }
+ }
+ .logo {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ margin: 0 0 ${({ theme }) => theme.spacing[4]}px 0;
+ img {
+ margin: 0 ${({ theme }) => theme.spacing[3]}px 0 0;
+ max-width: 150px;
+ width: 100%;
+ @media ${({ theme }) => theme.breakpoint.xs} {
+ max-width: 175px;
+ }
+ }
+ p {
+ font-size: 2em;
+ font-weight: ${({ theme }) => theme.font.light};
+ @media ${({ theme }) => theme.breakpoint.xs} {
+ font-size: 2.25em;
+ }
+ }
+ }
+ .right {
+ @media ${({ theme }) => theme.breakpoint.sm} {
+ padding: 0 0 0 ${({ theme }) => theme.spacing[3]}px;
+ }
+ @media ${({ theme }) => theme.breakpoint.sm} {
+ padding: 0 0 0 ${({ theme }) => theme.spacing[4]}px;
+ }
+ }
+ .screenshot {
+ margin: 0 0 ${({ theme }) => theme.spacing[5]}px 0;
+ .screenshot-image {
+ border-radius: 10px;
+ max-width: 400px;
+ width: 100%;
+ }
+ }
+ }
+ }
+ }
+ .shape {
+ box-sizing: border-box;
+ height: calc(100vw * 0.066);
+ min-height: 25px;
+ width: 100%;
+ svg {
+ fill: ${({ theme }) => theme.color.blue};
+ }
+ }
+`
+
+export default function LocationData() {
+ const sliderSettings = {
+ arrows: false,
+ autoplay: true,
+ autoplaySpeed: 2000,
+ dots: false,
+ slidesToScroll: 1,
+ slidesToShow: 5,
+ responsive: [
+ {
+ breakpoint: 992,
+ settings: {
+ slidesToShow: 4
+ }
+ },
+ {
+ breakpoint: 768,
+ settings: {
+ slidesToShow: 3
+ }
+ },
+ {
+ breakpoint: 576,
+ settings: {
+ slidesToShow: 2
+ }
+ },
+ {
+ breakpoint: 400,
+ settings: {
+ slidesToShow: 1
+ }
+ }
+ ]
+ }
+
+ const sliderItems = [
+ {
+ title: '20B+',
+ message: 'Daily Online Interactions'
+ },
+ {
+ title: '100K+',
+ message: 'App Access through Syndication partnership'
+ },
+ {
+ title: '2.4B+',
+ message: 'Device Graph North America'
+ },
+ {
+ title: '260+',
+ message: 'Terabytes of Data Collected Monthly'
+ },
+ {
+ title: '18M+',
+ message: 'MAU Devices in Canada'
+ }
+ ]
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ EQ Provides a Wealth of Geo-Spatial Location Data in
+ our Algorithms
+
+
+

+
+
+
+
+

+
DMP
+
+

+
+
+
+

+
DSP
+
+

+
+
+
+
+
+ {sliderItems.map((item) => (
+
+
{item.title}
+
{item.message}
+
+ ))}
+
+
+
+
+
+
+
+ )
+}
diff --git a/pages/index.js b/pages/index.js
index 965b4d3a..3310b148 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,9 +5,7 @@ const BetterUnderstand = dynamic(() =>
import('../components/index/better-understand')
)
const Tabs = dynamic(() => import('../components/index/tabs'))
-const LocationBehaviour = dynamic(() =>
- import('../components/index/location-behaviour')
-)
+const LocationData = dynamic(() => import('../components/index/location-data'))
const ConnectedDevices = dynamic(() =>
import('../components/index/connected-devices')
)
@@ -23,7 +21,7 @@ export default function Index() {
-
+
diff --git a/public/images/components/fallback/logo-locus-white.png b/public/images/components/fallback/logo-locus-white.png
new file mode 100644
index 00000000..b2760df4
Binary files /dev/null and b/public/images/components/fallback/logo-locus-white.png differ
diff --git a/public/images/index/fallback/location-data-atom.jpg b/public/images/index/fallback/location-data-atom.jpg
new file mode 100644
index 00000000..1f154b98
Binary files /dev/null and b/public/images/index/fallback/location-data-atom.jpg differ
diff --git a/public/images/index/fallback/location-data-locus.png b/public/images/index/fallback/location-data-locus.png
new file mode 100644
index 00000000..01f2bba5
Binary files /dev/null and b/public/images/index/fallback/location-data-locus.png differ
diff --git a/public/images/index/fallback/location-data-world.png b/public/images/index/fallback/location-data-world.png
new file mode 100644
index 00000000..fe5c06de
Binary files /dev/null and b/public/images/index/fallback/location-data-world.png differ
diff --git a/public/images/index/location-data-atom.jpg b/public/images/index/location-data-atom.jpg
new file mode 100644
index 00000000..1f154b98
Binary files /dev/null and b/public/images/index/location-data-atom.jpg differ
diff --git a/public/images/index/location-data-locus.png b/public/images/index/location-data-locus.png
new file mode 100644
index 00000000..01f2bba5
Binary files /dev/null and b/public/images/index/location-data-locus.png differ
diff --git a/styles/global.js b/styles/global.js
index 79128f64..da044f19 100644
--- a/styles/global.js
+++ b/styles/global.js
@@ -18,18 +18,25 @@ const GlobalStyle = createGlobalStyle`
h1 {
font-family: ${({ theme }) => theme.font.name}, sans-serif;
- font-weight: ${({ theme }) => theme.font.regular};
+ font-size: 2em;
+ font-weight: ${({ theme }) => theme.font.light};
line-height: 1.25em;
margin: 0;
padding: 0;
+ @media ${({ theme }) => theme.breakpoint.sm} {
+ font-size: 3em;
+ }
}
h2 {
font-family: ${({ theme }) => theme.font.name}, sans-serif;
- font-weight: ${({ theme }) => theme.font.regular};
- font-size: 2em;
+ font-size: 1.5em;
+ font-weight: ${({ theme }) => theme.font.light};
margin: 0;
padding: 0;
+ @media ${({ theme }) => theme.breakpoint.sm} {
+ font-size: 2em;
+ }
}
h3 {