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 +

+ + {`Globe + +
+
+
+ Locus logo +

DMP

+
+ Product design screenshot of EQ Locus platform +
+
+
+ Atom logo +

DSP

+
+ Product design screenshot of EQ Atom platform +
+
+ +
+ + {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 {