diff --git a/README.md b/README.md index f40ebd09..3507957d 100644 --- a/README.md +++ b/README.md @@ -142,6 +142,7 @@ To convert any image type (`.png`, `.jpg`, etc.) to the `.webp` format, you can - Order declaration properties alphabetically, but ignore vendor prefixes (`-webkit`, `-moz`, `-o`, `-ms`). Meaning `-webkit-box-shadow` should be treated as starting with the letter `b`. - Order action selectors alphabetically. - Place `@media` declarations at the end of properties. +- Place classes alphabetically after element selector. For example: `a {} p {} .button{} .item {}`. - For example: ```jsx @@ -152,8 +153,8 @@ const sectionStyled = styled.section` -webkit-box-shadow: none; box-shadow: none; display: inline-block; - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.regular}; + font-family: ${({ theme }) => theme.font.name}, sans-serif; + font-weight: ${({ theme }) => theme.font.regular}; text-align: center; a { text-decoration: none; diff --git a/components/404/content.js b/components/404/content.js index 774cb872..104924a1 100644 --- a/components/404/content.js +++ b/components/404/content.js @@ -24,7 +24,7 @@ const SectionStyled = styled.section` } p { font-size: 2em; - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-weight: ${({ theme }) => theme.font.bold}; margin: 0 auto 20px auto; max-width: 600px; } @@ -36,7 +36,7 @@ const SectionStyled = styled.section` text-transform: uppercase; } .subtitle { - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-weight: ${({ theme }) => theme.font.bold}; font-size: 2em; } @media ${({ theme }) => theme.breakpoint.sm} { diff --git a/components/atom/slides.js b/components/atom/slides.js index c1156079..1f9775d2 100644 --- a/components/atom/slides.js +++ b/components/atom/slides.js @@ -106,7 +106,7 @@ const SectionStyled = styled.section` .link { background-color: ${({ theme }) => theme.color.navBarLinksListHover}; color: ${({ theme }) => theme.color.white}; - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-weight: ${({ theme }) => theme.font.bold}; padding: 15px 30px; text-decoration: none; text-transform: uppercase; diff --git a/components/browser-opt-out/content.js b/components/browser-opt-out/content.js index 33ec5619..226fdbb9 100644 --- a/components/browser-opt-out/content.js +++ b/components/browser-opt-out/content.js @@ -16,8 +16,8 @@ const SectionStyled = styled.section` cursor: pointer; border: 2px solid ${({ theme }) => theme.color.black}; display: inline-block; - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.medium}; + font-family: ${({ theme }) => theme.font.name}, sans-serif; + font-weight: ${({ theme }) => theme.font.semiBold}; text-decoration: none; text-transform: uppercase; transition: all 0.25s ease-out; @@ -28,7 +28,7 @@ const SectionStyled = styled.section` } } .subtitle { - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-weight: ${({ theme }) => theme.font.bold}; margin: 20px auto; } ` diff --git a/components/careers/application-form.js b/components/careers/application-form.js index 8a053479..dddee343 100644 --- a/components/careers/application-form.js +++ b/components/careers/application-form.js @@ -20,7 +20,7 @@ const SectionStyled = styled.section` background-color: ${({ theme }) => theme.color.white}; border: 2px solid ${({ theme }) => theme.color.black}; cursor: pointer; - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-weight: ${({ theme }) => theme.font.bold}; margin: 0 0 20px 0; padding: 10px 20px; text-transform: uppercase; diff --git a/components/contact/contact-info.js b/components/contact/contact-info.js new file mode 100644 index 00000000..6da2a4de --- /dev/null +++ b/components/contact/contact-info.js @@ -0,0 +1,77 @@ +import * as React from 'react' +import styled from 'styled-components' + +const SectionStyled = styled.section` + background-color: ${({ theme }) => theme.color.greyBackground}; + margin: ${({ theme }) => theme.spacing[12]}px auto 0 auto; + .container { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 0 auto; + max-width: ${({ theme }) => theme.width.page}; + padding: ${({ theme }) => theme.spacing[6]}px + ${({ theme }) => theme.spacing[2]}px; + .divider { + background-color: ${({ theme }) => theme.color.greyLight}; + box-sizing: border-box; + height: 3px; + margin: 0 0 ${({ theme }) => theme.spacing[4]}px 0; + max-width: 200px; + width: 100%; + @media ${({ theme }) => theme.breakpoint.md} { + height: 125px; + margin: 0 ${({ theme }) => theme.spacing[3]}px 0 + ${({ theme }) => theme.spacing[2]}px; + width: 3px; + } + @media ${({ theme }) => theme.breakpoint.lg} { + margin: 0 ${({ theme }) => theme.spacing[7]}px 0 + ${({ theme }) => theme.spacing[4]}px; + } + } + .item { + text-align: center; + margin: 0 0 ${({ theme }) => theme.spacing[5]}px 0; + width: 100%; + &:last-child { + margin: 0; + } + @media ${({ theme }) => theme.breakpoint.md} { + padding: 0 ${({ theme }) => theme.spacing[1]}px; + text-align: left; + width: 20%; + } + } + } +` + +export default function Section() { + return ( + +
+
+

Toronto Office

+

1235 Bay Street, Suite 401

+

Toronto, ON, M5R 3K4

+
+
+
+

Sales

+

sales@eqworks.com

+
+
+

Media inquiries

+

press@eqworks.com

+
+
+

Investor relations

+

Peter Kanniah

+

peter.kanniah@eqworks.com

+

416 260 4326

+
+
+ + ) +} diff --git a/components/contact/form.js b/components/contact/form.js new file mode 100644 index 00000000..04ab9a9f --- /dev/null +++ b/components/contact/form.js @@ -0,0 +1,321 @@ +import Checkbox from '@material-ui/core/Checkbox' +import FormControlLabel from '@material-ui/core/FormControlLabel' +import FormGroup from '@material-ui/core/FormGroup' +import FormHelperText from '@material-ui/core/FormHelperText' +import TextField from '@material-ui/core/TextField' +import axios from 'axios' +import * as React from 'react' +import styled from 'styled-components' + +const SectionStyled = styled.section` + color: ${({ theme }) => theme.color.black}; + margin: ${({ theme }) => theme.spacing[12]}px auto; + max-width: ${({ theme }) => theme.width.article}; + padding: 0 ${({ theme }) => theme.spacing[2]}px; + text-align: center; + input[type='submit'] { + background-color: ${({ theme }) => theme.color.blue}; + border: none; + color: ${({ theme }) => theme.color.white}; + cursor: pointer; + font-size: 0.9em; + padding: ${({ theme }) => theme.spacing[2]}px + ${({ theme }) => theme.spacing[7]}px; + text-transform: uppercase; + transition: all 0.25s ease-out; + &:hover { + background-color: ${({ theme }) => theme.color.blueDark}; + color: ${({ theme }) => theme.color.white}; + } + } + .check-error-text { + margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto; + text-align: center; + } + .message-field { + box-sizing: border-box; + margin: 0 auto ${({ theme }) => theme.spacing[4]}px auto; + width: 100%; + @media ${({ theme }) => theme.breakpoint.sm} { + margin: 0 auto; + padding: 0 ${({ theme }) => theme.spacing[2]}px + ${({ theme }) => theme.spacing[6]}px + ${({ theme }) => theme.spacing[2]}px; + } + label { + color: ${({ theme }) => theme.color.black}; + font-weight: ${({ theme }) => theme.font.bold}; + font-size: 0.8em; + text-transform: uppercase; + @media ${({ theme }) => theme.breakpoint.sm} { + padding: 0 0 0 21px; + } + } + } + .MuiFormGroup-root { + .MuiTextField-root { + box-sizing: border-box; + padding: 0 0 ${({ theme }) => theme.spacing[4]}px 0; + width: 100%; + @media ${({ theme }) => theme.breakpoint.sm} { + padding: 0 ${({ theme }) => theme.spacing[2]}px + ${({ theme }) => theme.spacing[6]}px + ${({ theme }) => theme.spacing[2]}px; + width: 50%; + } + label { + color: ${({ theme }) => theme.color.black}; + font-weight: ${({ theme }) => theme.font.bold}; + font-size: 0.8em; + text-transform: uppercase; + @media ${({ theme }) => theme.breakpoint.sm} { + padding: 0 0 0 21px; + } + } + } + } + .MuiFormControlLabel-root { + display: block; + box-sizing: border-box; + .MuiFormControlLabel-label { + font-style: italic; + color: ${({ theme }) => theme.color.greyMedium}; + } + } +` + +export default function Form() { + const [checked, setChecked] = React.useState(false) + const [status, statusSet] = React.useState('') + const [formData, FormDataSet] = React.useState({}) + const [formError, formErrorSet] = React.useState({}) + + const handleChange = (event) => { + formErrorSet((prevData) => ({ + ...prevData, + consent: !event.target.checked + })) + + setChecked(event.target.checked) + } + + const updateInput = (event, field) => { + FormDataSet((prevData) => ({ + ...prevData, + [field]: event.target.value + })) + + const fieldError = event.target.value.length > 0 ? false : true + formErrorSet((prevData) => ({ + ...prevData, + [field]: fieldError + })) + } + + const submitForm = (event) => { + event.preventDefault() + + const syncErrors = [] + if (!formData['first-name'] || formData['first-name'].length < 1) { + formErrorSet((prevData) => ({ + ...prevData, + 'first-name': true + })) + syncErrors.push('first-name') + } + + if (!formData['last-name'] || formData['last-name'].length < 1) { + formErrorSet((prevData) => ({ + ...prevData, + 'last-name': true + })) + syncErrors.push('last-name') + } + + if (!formData['company'] || formData['company'].length < 1) { + formErrorSet((prevData) => ({ + ...prevData, + company: true + })) + syncErrors.push('company') + } + + if (!formData['job-title'] || formData['job-title'].length < 1) { + formErrorSet((prevData) => ({ + ...prevData, + 'job-title': true + })) + syncErrors.push('job-title') + } + + if ( + !formData['email'] || + formData['email'].length < 1 || + !validateEmail(formData['email']) + ) { + formErrorSet((prevData) => ({ + ...prevData, + email: true + })) + syncErrors.push('email') + } + + if (!formData['phone'] || formData['phone'].length < 1) { + formErrorSet((prevData) => ({ + ...prevData, + phone: true + })) + syncErrors.push('phone') + } + + if (!formData['message'] || formData['message'].length < 1) { + formErrorSet((prevData) => ({ + ...prevData, + message: true + })) + syncErrors.push('message') + } + + if (!checked) { + formErrorSet((prevData) => ({ + ...prevData, + consent: true + })) + syncErrors.push('consent') + } + + if (syncErrors.length === 0) { + axios({ + url: 'https://formspree.io/f/mqkyorzl', + method: 'post', + headers: { + Accept: 'application/json' + }, + data: { + first_name: formData['first-name'], + last_name: formData['last-name'], + company: formData['company'], + job_title: formData['job-title'], + email: formData['email'], + phone: formData['phone'], + message: formData['message'], + consent: formData['consent'] + } + }).then((response) => { + if (response.status === 200) { + statusSet('SUCCESS') + } else { + statusSet('ERROR') + } + }) + } + } + + function validateEmail(email) { + const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ + return re.test(String(email).toLowerCase()) + } + + return ( + +
+ + updateInput(event, 'first-name')} + required + /> + updateInput(event, 'last-name')} + required + /> + + + + updateInput(event, 'company')} + required + /> + updateInput(event, 'job-title')} + required + /> + + + + updateInput(event, 'email')} + required + type='email' + /> + updateInput(event, 'phone')} + required + type='tel' + /> + + + updateInput(event, 'message')} + required + rowsMax={4} + type='tel' + /> + + + } + label='I consent to my submitted data being collected and stored.' + /> + + {formError['consent'] ? 'Required field.' :  } + + + + + + {status === 'SUCCESS' && ( +

Thank you for your message. It has been sent.

+ )} + {status === 'ERROR' &&

Ooops! There was an error. Please try again

} +
+ ) +} diff --git a/components/contact/info-form.js b/components/contact/info-form.js index ac79adaa..7b56d754 100644 --- a/components/contact/info-form.js +++ b/components/contact/info-form.js @@ -27,7 +27,7 @@ const SectionStyled = styled.section` } .title { color: ${({ theme }) => theme.color.black}; - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-weight: ${({ theme }) => theme.font.bold}; font-size: 1.2em; } } @@ -43,7 +43,7 @@ const SectionStyled = styled.section` background-color: ${({ theme }) => theme.color.white}; border: 2px solid ${({ theme }) => theme.color.black}; cursor: pointer; - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-weight: ${({ theme }) => theme.font.bold}; margin: 0 0 20px 0; padding: 10px 20px; text-transform: uppercase; @@ -86,18 +86,18 @@ const SectionStyled = styled.section` color: ${({ theme }) => theme.color.greyMedium}; } .subtext { - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-weight: ${({ theme }) => theme.font.bold}; } .subtitle { color: ${({ theme }) => theme.color.black}; - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-weight: ${({ theme }) => theme.font.bold}; margin: 0 0 20px 0; } } } .title { color: ${({ theme }) => theme.color.black}; - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-weight: ${({ theme }) => theme.font.bold}; font-size: 1.2em; margin: 0 0 10px 0; } diff --git a/components/contact/map.js b/components/contact/map.js index 8c794993..42695b55 100644 --- a/components/contact/map.js +++ b/components/contact/map.js @@ -9,7 +9,7 @@ const SectionStyled = styled.section` width: 100vw; } .map { - height: 500px; + height: 300px; .mapboxgl-ctrl-logo { display: none; } diff --git a/components/covid-19/article.js b/components/covid-19/article.js index fff0312a..3fa01d6d 100644 --- a/components/covid-19/article.js +++ b/components/covid-19/article.js @@ -24,10 +24,6 @@ const SectionStyled = styled.section` ul { color: ${({ theme }) => theme.color.greyMedium}; } - .bold { - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.bold}; - } } .header { align-items: center; @@ -98,7 +94,7 @@ export default function Article() { Governments can leverage as readily as multinational technology companies. The most compelling attribute of mobile-phone-based Contact Tracing is that{' '} - + benefits can be achieved without breaching the trust and privacy of the public @@ -110,7 +106,7 @@ export default function Article() { country and from location to location. All of our models and data are fully privacy compliant. Our team has studied the Contact Tracing solutions being deployed in other parts of the world with a{' '} - + goal to maintain Canadian standards for societal norms and public trust while adopting international best practices @@ -123,41 +119,43 @@ export default function Article() { Our technology and our expertise provide the initial footprint for a Contact Tracing application that is tested and ready. Our focus has been on{' '} - + Proactive Prevention NOT Policing Enforcement {' '} and our work is based on the following principles:

  • - Prevention – Given the right tools, - stakeholders (e.g. public health officials, first responders, - citizens) can take proactive, preventative action to flatten the - curve. + Prevention – Given the + right tools, stakeholders (e.g. public health officials, first + responders, citizens) can take proactive, preventative action to + flatten the curve.
  • - Privacy – No solution should force a - trade-off between privacy and public health. Until COVID-19, few - topics were of more concern than privacy, user control, and public - confidence in the technologies we use in our daily lives. + Privacy – No solution + should force a trade-off between privacy and public health. Until + COVID-19, few topics were of more concern than privacy, user + control, and public confidence in the technologies we use in our + daily lives.
  • - Knowledge – Armed with the right - information, we believe individuals will act in accordance with - their own best interest, and that of their families, friends, and - communities. + Knowledge – Armed with the + right information, we believe individuals will act in accordance + with their own best interest, and that of their families, friends, + and communities.
  • - Collaboration – Broad-based solutions, - require coalitions – government, not-for-profit institutes, other - technology providers – in order to achieve critical mass. + Collaboration – + Broad-based solutions, require coalitions – government, + not-for-profit institutes, other technology providers – in order to + achieve critical mass.
  • - Canadian – We believe it is essential - that Canada leverage made-in-Canada solutions. + Canadian – We believe it + is essential that Canada leverage made-in-Canada solutions.
-

+

Contact Tracing technology and expertise resides in Canada now and can be used to help flatten the curve today.

diff --git a/components/financial-reports/unordered-list.js b/components/financial-reports/unordered-list.js index 5a5ff6bb..4809a91d 100644 --- a/components/financial-reports/unordered-list.js +++ b/components/financial-reports/unordered-list.js @@ -19,7 +19,7 @@ const SectionStyled = styled.section` margin: 0 0 10px 0; a { color: ${({ theme }) => theme.color.black}; - font-weight: ${({ theme }) => theme.font.copy.medium}; + font-weight: ${({ theme }) => theme.font.semiBold}; text-decoration: none; } h2 { diff --git a/components/index/ai-tools.js b/components/index/ai-tools.js new file mode 100644 index 00000000..58ccf7f1 --- /dev/null +++ b/components/index/ai-tools.js @@ -0,0 +1,88 @@ +import styled from 'styled-components' + +const SectionStyled = styled.section` + color: ${({ theme }) => theme.color.black}; + margin: ${({ theme }) => theme.spacing[12]}px auto; + max-width: ${({ theme }) => theme.width.page}; + padding: 0 ${({ theme }) => theme.spacing[2]}px; + text-align: center; + h2 { + margin: 0 auto ${({ theme }) => theme.spacing[6]}px auto; + } + .items { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + justify-content: center; + .item { + margin: 0 auto ${({ theme }) => theme.spacing[6]}px auto; + width: 100%; + @media ${({ theme }) => theme.breakpoint.sm} { + width: 50%; + } + @media ${({ theme }) => theme.breakpoint.md} { + width: 33%; + } + img { + margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto; + max-width: 75px; + width: 100%; + } + p { + margin: 0 auto; + max-width: 325px; + } + .font-weight-bold { + margin: 0 auto ${({ theme }) => theme.spacing[1]}px auto; + } + } + } +` + +export default function Section() { + return ( + +

+ EQ's AI-based tools +
+ power real customer outcomes +

+
+
+ User avatar with stars and a checkmark. +

Retention & Loyaly

+

+ Read the signals that predict customer churn to take + preventative action. +

+
+
+ Watering can watering a money plant. +

Share of Wallet

+

+ Understand which product categories represent the biggest + share-growth opportunities among your customers, and deploy + marketing initiatives based on these insights. +

+
+
+ Globe with a user avatar overlayed. +

Customer Acquisition

+

+ Find new customers that look like your best customers to drive + market penetration and life-time value. +

+
+
+ + ) +} diff --git a/components/index/better-understand.js b/components/index/better-understand.js new file mode 100644 index 00000000..923e6b7e --- /dev/null +++ b/components/index/better-understand.js @@ -0,0 +1,286 @@ +import styled from 'styled-components' + +const SectionStyled = styled.section` + margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto; + max-width: ${({ theme }) => theme.width.page}; + @media ${({ theme }) => theme.breakpoint.md} { + padding: 0 ${({ theme }) => theme.spacing[2]}px; + } + .slide-img-left { + margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto; + .image-bar { + background-color: ${({ theme }) => theme.color.greyMedium}; + background-position: center top; + background-repeat: no-repeat; + background-size: cover; + height: 200px; + @media ${({ theme }) => theme.breakpoint.xs} { + height: 300px; + } + @media ${({ theme }) => theme.breakpoint.sm} { + height: 400px; + } + @media ${({ theme }) => theme.breakpoint.md} { + display: none; + } + } + .image-bar-1 { + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), + url('/images/index/fallback/better-understand-1.jpg'); + } + .image-bar-2 { + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), + url('/images/index/fallback/better-understand-2.jpg'); + } + .image-bar-3 { + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), + url('/images/index/fallback/better-understand-3.jpg'); + } + .content { + align-items: center; + @media ${({ theme }) => theme.breakpoint.md} { + display: flex; + } + .left { + display: none; + padding: 0 ${({ theme }) => theme.spacing[4]}px; + width: 50%; + @media ${({ theme }) => theme.breakpoint.md} { + display: block; + } + @media ${({ theme }) => theme.breakpoint.lg} { + padding: 0 ${({ theme }) => theme.spacing[12]}px; + } + .image { + background-color: ${({ theme }) => theme.color.greyMedium}; + height: 100%; + width: 100%; + } + } + .right { + padding: ${({ theme }) => theme.spacing[12]}px + ${({ theme }) => theme.spacing[2]}px 0 + ${({ theme }) => theme.spacing[2]}px; + text-align: center; + @media ${({ theme }) => theme.breakpoint.md} { + padding: 0 ${({ theme }) => theme.spacing[2]}px 0 0; + text-align: left; + } + h2 { + margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto; + text-transform: uppercase; + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0 0 ${({ theme }) => theme.spacing[2]}px 0; + max-width: 450px; + } + } + p { + margin: 0 auto; + max-width: 450px; + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0; + } + } + .divider { + background-color: ${({ theme }) => theme.color.blue}; + height: 5px; + margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto; + width: 100px; + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0 0 ${({ theme }) => theme.spacing[2]}px 0; + } + } + .paragraph-1 { + margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto; + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0 0 ${({ theme }) => theme.spacing[2]}px 0; + } + } + } + } + } + .slide-img-right { + margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto; + .image-bar { + background-color: ${({ theme }) => theme.color.greyMedium}; + background-position: center top; + background-repeat: no-repeat; + background-size: cover; + height: 200px; + @media ${({ theme }) => theme.breakpoint.xs} { + height: 300px; + } + @media ${({ theme }) => theme.breakpoint.sm} { + height: 400px; + } + @media ${({ theme }) => theme.breakpoint.md} { + display: none; + } + } + .image-bar-1 { + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), + url('/images/index/fallback/better-understand-1.jpg'); + } + .image-bar-2 { + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), + url('/images/index/fallback/better-understand-2.jpg'); + } + .image-bar-3 { + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), + url('/images/index/fallback/better-understand-3.jpg'); + } + .content { + align-items: center; + @media ${({ theme }) => theme.breakpoint.md} { + display: flex; + } + .left { + padding: ${({ theme }) => theme.spacing[12]}px + ${({ theme }) => theme.spacing[2]}px 0 + ${({ theme }) => theme.spacing[2]}px; + text-align: center; + @media ${({ theme }) => theme.breakpoint.md} { + padding: 0 0 0 ${({ theme }) => theme.spacing[2]}px; + text-align: left; + } + h2 { + margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto; + text-transform: uppercase; + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0 0 ${({ theme }) => theme.spacing[2]}px 0; + max-width: 450px; + } + } + p { + margin: 0 auto; + max-width: 450px; + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0; + } + } + .divider { + background-color: ${({ theme }) => theme.color.blue}; + height: 5px; + margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto; + width: 100px; + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0 0 ${({ theme }) => theme.spacing[2]}px 0; + } + } + .paragraph-1 { + margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto; + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0 0 ${({ theme }) => theme.spacing[2]}px 0; + } + } + } + .right { + display: none; + padding: 0 ${({ theme }) => theme.spacing[4]}px; + width: 50%; + @media ${({ theme }) => theme.breakpoint.md} { + display: block; + } + @media ${({ theme }) => theme.breakpoint.lg} { + padding: 0 ${({ theme }) => theme.spacing[8]}px; + } + .image { + background-color: ${({ theme }) => theme.color.greyMedium}; + height: 100%; + width: 100%; + } + } + } + } +` + +export default function BetterUnderstand() { + return ( + +
+
+
+
+ Person jumping for joy. +
+
+

+ Better Understand Your + Consumer +

+
+

+ Location data tells more about a consumer than where they live or + where they've been, it informs what they are likely to need, + likely to be in market to buy, and preferences they are likely + to have. +

+

+ 90% of the world's data was generated in the last 2 years, driven + by proliferation of location information. +

+
+
+
+ +
+
+
+
+

+ Predict consumer actions +

+
+

+ AI and Machine Learning unlock the power of location data to + predict the decisions consumers are likely to make next. +

+

+ Many of world's most respected consumer brands have mastered the + art of turning data into prediction. +

+
+
+ Person jumping for joy. +
+
+
+ +
+
+
+
+ Person jumping for joy. +
+
+

+ Influence Consumer Decisions +

+
+

+ Deepening loyalty and taking consumer share, requires businesses + to close the last-mile: The consumer emotions that + drive impulse. +

+

+ Marketing efforts that engage consumer emotions are 2x + more effective. +

+
+
+
+ + ) +} diff --git a/components/index/blue-tabs.js b/components/index/blue-tabs.js new file mode 100644 index 00000000..73d0d3de --- /dev/null +++ b/components/index/blue-tabs.js @@ -0,0 +1,222 @@ +import * as React from 'react' +import styled from 'styled-components' + +const SectionStyled = styled.section` + color: ${({ theme }) => theme.color.white}; + margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto; + padding: 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[8]}px + ${({ theme }) => theme.spacing[2]}px; + text-align: center; + @media ${({ theme }) => theme.breakpoint.md} { + align-items: center; + display: flex; + flex-direction: row-reverse; + justify-content: center; + } + .image { + box-sizing: border-box; + display: none; + padding: ${({ theme }) => theme.spacing[4]}px; + @media ${({ theme }) => theme.breakpoint.md} { + display: block; + width: 50%; + } + h2 { + margin: 0 0 ${({ theme }) => theme.spacing[1]}px 0; + max-width: 400px; + text-align: left; + } + img { + display: none; + width: 100%; + } + .show { + display: block; + } + } + .tabs { + display: flex; + flex-direction: column; + justify-content: center; + h2 { + margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto; + max-width: 300px; + @media ${({ theme }) => theme.breakpoint.md} { + display: none; + } + } + ul { + margin: 0; + list-style-image: none; + list-style-type: none; + padding: 0; + width: 100%; + li { + background-color: ${({ theme }) => theme.color.blueDark}; + box-sizing: border-box; + color: ${({ theme }) => theme.color.white}; + cursor: pointer; + margin: ${({ theme }) => theme.spacing[1]}px auto; + max-width: 500px; + padding: ${({ theme }) => theme.spacing[2]}px; + text-align: left; + width: 100%; + .li-content { + padding: ${({ theme }) => theme.spacing[1]}px 0 + ${({ theme }) => theme.spacing[6]}px 0; + } + .title { + font-size: 1em; + } + } + .active { + background-color: ${({ theme }) => theme.color.white}; + color: ${({ theme }) => theme.color.black}; + } + } + } + } + } + .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 [tabValue, setTabValue] = React.useState(0) + + return ( + +
+ + + +
+ +
+
+
+

+ How Can EQ Help Me Grow?{' '} + I'm A: +

+
    +
  • setTabValue(0)} + > +

    + Business Decision Makers +

    + {tabValue === 0 && ( +

    + CRM enrichment for loyalty & customer acquisition, store + performance benchmarking, assortment planning, return on + marketing spend. +

    + )} +
    • +
  • setTabValue(1)} + > +

    + Marketing & Advertising Decision Makers +

    + {tabValue === 1 && ( +

    + SaaS data and media buying tools, performance optimization, + insights, and Creative Studio. +

    + )} +
    • +
  • setTabValue(2)} + > +

    Media Owners

    + {tabValue === 2 && ( +

    + Platform-as-a-Service to scale first party audiences and + show return advertising spend through changes in real world + consumer behavior. +

    + )} +
    • +
  • setTabValue(3)} + > +

    + Data Scientists & Developers +

    + {tabValue === 3 && ( +

    + Juypter notebook capabilities to enable data manipulation + without limitation, API access for privacy-compliant + localization in your own environment, and + machine-learning-model training gym. +

    + )} +
    • +
+
+ +
+

How Can EQ Help Me Grow?

+ Business person next to an abstract calendar. + Person interacting with abstract mobile phone data. + Person interacting with an abstract play button. + Scientist working with flasks. +
+
+
+ +
+ + + +
+ + ) +} diff --git a/components/index/brands.js b/components/index/brands.js new file mode 100644 index 00000000..e1c660fb --- /dev/null +++ b/components/index/brands.js @@ -0,0 +1,139 @@ +import Slider from 'react-slick' +import styled from 'styled-components' + +const SectionStyled = styled.section` + background-color: ${({ theme }) => theme.color.blue}; + margin: 0 auto; + padding: 0; + .container { + background-color: ${({ theme }) => theme.color.greyBackground}; + box-sizing: border-box; + .content { + box-sizing: border-box; + margin: 0 auto; + max-width: ${({ theme }) => theme.width.page}; + padding: ${({ theme }) => theme.spacing[8]}px + ${({ theme }) => theme.spacing[2]}px; + text-align: center; + h2 { + font-size: 1em; + font-weight: bold; + margin: 0 auto ${({ theme }) => theme.spacing[5]}px auto; + text-align: center; + @media ${({ theme }) => theme.breakpoint.sm} { + font-size: 1.15em; + } + @media ${({ theme }) => theme.breakpoint.md} { + font-size: 1.25em; + } + } + .carousel { + margin: 0 auto; + max-width: ${({ theme }) => theme.width.page}; + padding: 0 ${({ theme }) => theme.spacing[2]}px; + .item { + align-items: center; + box-sizing: border-box; + display: flex; + justify-content: center; + padding: 0 ${({ theme }) => theme.spacing[4]}px; + } + img { + width: 100%; + } + } + } + } + .shape { + box-sizing: border-box; + display: none; + height: calc(100vw * 0.066); + min-height: 25px; + width: 100%; + @media ${({ theme }) => theme.breakpoint.sm} { + display: block; + } + svg { + fill: ${({ theme }) => theme.color.greyBackground}; + } + } +` + +export default function OurClients({ header }) { + 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: 350, + settings: { + slidesToShow: 1 + } + } + ] + } + + const sliderItemAlt = [ + 'Walmart', + 'Amazon Prime Video', + 'Sobeys', + 'Harry Rosen', + 'Audi', + 'TD Bank' + ] + + return ( + +
+
+

Trusted by some of the world's largest brands

+
+ + {sliderItemAlt.map((altText, index) => ( +
+ {`${altText} +
+ ))} + +
+
+
+ +
+ + + +
+ + ) +} diff --git a/components/index/connected-devices.js b/components/index/connected-devices.js index 0e763ccf..d337ebd7 100644 --- a/components/index/connected-devices.js +++ b/components/index/connected-devices.js @@ -63,10 +63,6 @@ const SectionStyled = styled.section` margin: 0 0 10px 0; width: 40px; } - .bold { - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.bold}; - } } } .top { @@ -113,7 +109,7 @@ export default function ConnectedDevices() {

- 40,000,000 + 40,000,000
Points of interest

@@ -121,7 +117,7 @@ export default function ConnectedDevices() {

- 300,000 + + 300,000 +
App integrations

@@ -129,7 +125,7 @@ export default function ConnectedDevices() {

- 7 TB + 7 TB
Data daily

diff --git a/components/index/creative.js b/components/index/creative.js new file mode 100644 index 00000000..3d0129af --- /dev/null +++ b/components/index/creative.js @@ -0,0 +1,121 @@ +import styled, { useTheme } from 'styled-components' +import * as React from 'react' + +import Button from '../shared/button' + +const SectionStyled = styled.section` + color: ${({ theme }) => theme.color.black}; + font-size: ${(props) => (props.largeFont ? '2em' : '1em')}; + text-align: center; + margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto; + max-width: ${({ theme }) => theme.width.page}; + padding: 0 ${({ theme }) => theme.spacing[2]}px; + h2 { + margin: 0 auto ${({ theme }) => theme.spacing[3]}px auto; + text-transform: uppercase; + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0 0 ${({ theme }) => theme.spacing[3]}px 0; + } + } + @media ${({ theme }) => theme.breakpoint.md} { + align-items: center; + display: flex; + justify-content: space-between; + text-align: left; + } + .left { + margin: 0 auto ${({ theme }) => theme.spacing[5]}px auto; + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0; + padding: 0 ${({ theme }) => theme.spacing[2]}px 0 0; + /* width: 40%; */ + } + .divider { + background-color: ${({ theme }) => theme.color.blue}; + height: 5px; + margin: 0 auto ${({ theme }) => theme.spacing[3]}px auto; + width: 100px; + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0 0 ${({ theme }) => theme.spacing[3]}px 0; + } + } + .subtitle { + font-size: 1.15em; + margin: 0 auto ${({ theme }) => theme.spacing[3]}px auto; + } + .text { + margin: 0 auto ${({ theme }) => theme.spacing[3]}px auto; + } + .subtitle, + .text { + max-width: 500px; + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0 0 ${({ theme }) => theme.spacing[3]}px 0; + /* max-width: 400px; */ + } + } + } + .right { + @media ${({ theme }) => theme.breakpoint.md} { + align-items: center; + display: flex; + justify-content: center; + padding: 0; + } + img { + max-width: 500px; + width: 100%; + @media ${({ theme }) => theme.breakpoint.md} { + max-width: 100%; + } + } + } +` + +export default function Creative() { + const theme = useTheme() + const [width, setWidth] = React.useState(null) + + React.useEffect(() => { + const handleResize = () => setWidth(window.innerWidth) + + window.addEventListener('resize', handleResize) + + handleResize() + + return () => window.removeEventListener('resize', handleResize) + }, []) + + return ( + +
+ {width < theme.breakpointValue.md && ( +

Award-Winning Omni-Channel Creative

+ )} + {width >= theme.breakpointValue.md && ( +

+ Award-Winning +
+ Omni-Channel Creative +

+ )} +
+

+ A Canadian-based Creative Studio here to help cut through marketing + noise and influence customers to drive real results. +

+

+ Our in-house studio includes bespoke custom ads on campaigns that + develop positive moments and build brand loyalty. +

+
+
+ Multiple devices (desktop monitor, laptop, tablet, and mobile) displaying an ad unit at difference sizes. +
+ + ) +} diff --git a/components/index/eq-advantage.js b/components/index/eq-advantage.js new file mode 100644 index 00000000..c0cccc98 --- /dev/null +++ b/components/index/eq-advantage.js @@ -0,0 +1,88 @@ +import styled from 'styled-components' + +const SectionStyled = styled.section` + color: ${({ theme }) => theme.color.black}; + margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto; + max-width: ${({ theme }) => theme.width.page}; + padding: 0 ${({ theme }) => theme.spacing[2]}px; + text-align: center; + h2 { + margin: 0 0 ${({ theme }) => theme.spacing[4]}px 0; + text-transform: uppercase; + } + .items { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + .item { + max-width: 250px; + margin: ${({ theme }) => theme.spacing[2]}px + ${({ theme }) => theme.spacing[2]}px + ${({ theme }) => theme.spacing[4]}px + ${({ theme }) => theme.spacing[2]}px; + img { + margin: 0 auto; + max-width: 111px; + } + .title { + font-weight: ${({ theme }) => theme.font.bold}; + margin: 0 auto ${({ theme }) => theme.spacing[1]}px auto; + } + } + } +` + +export default function EQAdvantage() { + return ( + +

The EQ Advantage

+
+
+ Brain icon +

Scale

+

+ More than a petabyte of geospatial data collected, organized, + and stored +

+
+
+ Avatar icon +

ROI

+

+ Ability to connect online events to real-world behavior, such as a + store-visit +

+
+
+ Computer with charts icon +

Time Travel

+

+ Ability to understand historical consumer behavior to find an engage + them today +

+
+
+ Trophy icon +

Tools

+

+ Award-winning Creative Studio, with omni-channel ideation and design + support. +

+
+
+ + ) +} diff --git a/components/index/hero.js b/components/index/hero.js index 48dc052b..b9aac503 100644 --- a/components/index/hero.js +++ b/components/index/hero.js @@ -1,90 +1,130 @@ +import { Newspaper } from '@styled-icons/fa-solid/Newspaper' +import Link from 'next/link' +import * as React from 'react' import styled from 'styled-components' const SectionStyled = styled.section` - background-color: ${({ theme }) => theme.color.black}; - padding: 0; - .hero__content { + align-items: center; + color: ${({ theme }) => theme.color.white}; + display: flex; + box-sizing: border-box; + height: calc(100vh - ${({ theme }) => theme.height.navBar}); + justify-content: center; + margin: 0 auto; + padding: 0 ${({ theme }) => theme.spacing[2]}px; + text-align: center; + @media ${({ theme }) => theme.breakpoint.sm} { + height: calc(100vh - ${({ theme }) => theme.height.navBarMD}); + } + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto; + } + .content { align-items: center; - background: rgba(0, 0, 0, 0.5); - box-sizing: border-box; - color: ${({ theme }) => theme.color.white}; display: flex; flex-direction: column; - height: calc(100vh - ${({ theme }) => theme.height.navBar}); justify-content: center; - padding: 0 20px; - position: relative; - width: 100%; - text-align: center; z-index: ${({ theme }) => theme.zIndex.pageContent}; - @media ${({ theme }) => theme.breakpoint.sm} { - height: 100vh; + h1 { + margin: 0 0 ${({ theme }) => theme.spacing[4]}px 0; + text-transform: uppercase; + } + p { + max-width: ${({ theme }) => theme.width.article}; } - div { - display: none; - @media ${({ theme }) => theme.breakpoint.md} { + .footer { + align-items: center; + bottom: 0; + display: flex; + margin: 0 auto ${({ theme }) => theme.spacing[4]}px auto; + position: absolute; + text-align: center; + a { align-items: center; - border: 1px solid ${({ theme }) => theme.color.white}; - border-radius: 100%; - cursor: pointer; + color: ${({ theme }) => theme.color.white}; display: flex; - height: 60px; - justify-content: center; - margin: 40px 0 0 0; - width: 60px; - } - } - h1 { - font-size: 3em; - max-width: 800px; - @media ${({ theme }) => theme.breakpoint.sm} { - font-size: 4em; + text-decoration: none; + .icon { + align-items: center; + border: 2px solid ${({ theme }) => theme.color.white}; + border-radius: 100%; + display: flex; + margin: 0 ${({ theme }) => theme.spacing[2]}px 0 0; + } + svg { + color: ${({ theme }) => theme.color.white}; + padding: ${({ theme }) => theme.spacing[1]}px; + width: 20px; + } } } - p { - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.regular}; - font-size: 2em; - margin: 20px 0 0 0; + .subtitle-1 { + font-size: 1.25em; + margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto; } } - .hero__video { - bottom: 0; - min-height: 100%; - min-width: 100%; + .video-container { + box-sizing: border-box; + height: 100%; + left: 0; + overflow: hidden; position: absolute; - right: 0%; - z-index: ${({ theme }) => theme.zIndex.indexHeroVideo}; + top: 0; + width: 100%; + video { + box-sizing: border-box; + left: 50%; + min-height: 100%; + min-width: 100%; + object-fit: cover; + position: absolute; + transform: translate(-50%, -50%); + top: 50%; + } } - #scrollToLocation { - bottom: calc(${({ theme }) => theme.height.navBarScrolled} / 2); - opacity: 0; + .video-container:after { + /* background: rgba(0, 0, 0, 0.5); */ + content: ''; + height: 100%; + left: 0; position: absolute; + width: 100%; + top: 0; + z-index: ${({ theme }) => theme.zIndex.indexHeroVideo}; } ` export default function Hero() { - const scrollToElement = () => { - document.getElementById('scrollToLocation').scrollIntoView() - } - return ( -
-

Powerful Results from Where People Go

-

Connect with and understand your audience.

-
- ↓ +
+ +
+ +
+

Turning Data into Business Performance.

+ +

+ EQ enables businesses to{' '} + Understand,{' '} + Predict, and{' '} + Influence{' '} + customer behaviour. +

+ +
- -
) } diff --git a/components/index/location-behaviour.js b/components/index/location-behaviour.js index cc260c25..6d32ceca 100644 --- a/components/index/location-behaviour.js +++ b/components/index/location-behaviour.js @@ -16,13 +16,13 @@ const SectionStyled = styled.section` max-width: 600px; } .footer { - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-family: ${({ theme }) => theme.font.name}, sans-serif; + font-weight: ${({ theme }) => theme.font.bold}; margin: 20px 0 0 0; } .subtitle { - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-family: ${({ theme }) => theme.font.name}, sans-serif; + font-weight: ${({ theme }) => theme.font.bold}; font-size: 1.5rem; margin: 0 0 20px 0; } diff --git a/components/index/tabs.js b/components/index/tabs.js new file mode 100644 index 00000000..e65b6c07 --- /dev/null +++ b/components/index/tabs.js @@ -0,0 +1,144 @@ +import * as React from 'react' +import styled from 'styled-components' + +const SectionStyled = styled.section` + margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto; + max-width: ${({ theme }) => theme.width.page}; + padding: 0 ${({ theme }) => theme.spacing[2]}px; + @media ${({ theme }) => theme.breakpoint.md} { + align-items: center; + display: flex; + flex-direction: row-reverse; + justify-content: center; + } + .image { + display: none; + @media ${({ theme }) => theme.breakpoint.md} { + display: block; + width: 50%; + } + .image-file { + height: 400px; + margin: 0 auto; + max-width: 400px; + width: 100%; + } + .file-0 { + background-color: ${({ theme }) => theme.color.greyDark}; + } + .file-1 { + background-color: ${({ theme }) => theme.color.greyMedium}; + } + .file-2 { + background-color: ${({ theme }) => theme.color.greyTextFooter}; + } + .file-3 { + background-color: ${({ theme }) => theme.color.greyLight}; + } + } + .tabs { + display: flex; + justify-content: center; + ul { + margin: 0; + list-style-image: none; + list-style-type: none; + padding: 0; + width: 100%; + li { + background-color: ${({ theme }) => theme.color.blue}; + box-sizing: border-box; + color: ${({ theme }) => theme.color.white}; + cursor: pointer; + margin: ${({ theme }) => theme.spacing[1]}px auto; + max-width: 500px; + padding: ${({ theme }) => theme.spacing[2]}px; + width: 100%; + .title { + font-size: 1em; + } + } + .active { + background-color: ${({ theme }) => theme.color.white}; + border: 2px solid ${({ theme }) => theme.color.greyLight}; + color: ${({ theme }) => theme.color.black}; + } + } + } +` + +export default function Tabs() { + const [tabValue, setTabValue] = React.useState(0) + + return ( + +
+
    +
  • setTabValue(0)} + > +

    Business Decision Makers

    + {tabValue === 0 && ( +

    + CRM enrichment for loyalty & customer acquisition, store + performance benchmarking, assortment planning, return on + marketing spend. +

    + )} +
    • +
  • setTabValue(1)} + > +

    + Marketing & Advertising Decision Makers +

    + {tabValue === 1 && ( +

    + SaaS data and media buying tools, performance optimization, + insights, and Creative Studio. +

    + )} +
    • +
  • setTabValue(2)} + > +

    Media Owners

    + {tabValue === 2 && ( +

    + Platform-as-a-Service to scale first party audiences and show + return advertising spend through changes in real world + consumer behavior. +

    + )} +
    • +
  • setTabValue(3)} + > +

    + Data Scientists & Developers +

    + {tabValue === 3 && ( +

    + Juypter notebook capabilities to enable data manipulation + without limitation, API access for privacy-compliant + localization in your own environment, and machine-learning-model + training gym. +

    + )} +
    • +
+
+ +
+ {tabValue === 0 &&
} + {tabValue === 1 &&
} + {tabValue === 2 &&
} + {tabValue === 3 &&
} +
+ + ) +} diff --git a/components/index/video.js b/components/index/video.js index 1a9f4459..eb4199c8 100644 --- a/components/index/video.js +++ b/components/index/video.js @@ -43,7 +43,7 @@ export default function Video(props) { loading='lazy' title='EQ Works introduction video.' width='560' - src='https://www.youtube-nocookie.com/embed/AgZhgUsTQfI' + src='https://www.youtube.com/embed/AgZhgUsTQfI' >
diff --git a/components/index/why-clients-use-us.js b/components/index/why-clients-use-us.js index 120af412..f8682f59 100644 --- a/components/index/why-clients-use-us.js +++ b/components/index/why-clients-use-us.js @@ -54,8 +54,8 @@ const SectionStyled = styled.section` margin: 0 0 20px 0; padding: 0 20px; h2 { - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-family: ${({ theme }) => theme.font.name}, sans-serif; + font-weight: ${({ theme }) => theme.font.bold}; font-size: 1.5em; } } diff --git a/components/investors/analyst-reports.js b/components/investors/analyst-reports.js index e2b5ffb2..3a3cbfbd 100644 --- a/components/investors/analyst-reports.js +++ b/components/investors/analyst-reports.js @@ -32,7 +32,7 @@ const SectionStyled = styled.section` } a { color: ${({ theme }) => theme.color.black}; - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-weight: ${({ theme }) => theme.font.bold}; text-decoration: none; text-transform: uppercase; transition: all 0.25s ease-out; diff --git a/components/investors/in-the-news.js b/components/investors/in-the-news.js index 5a9f0d48..ebcd2af6 100644 --- a/components/investors/in-the-news.js +++ b/components/investors/in-the-news.js @@ -52,7 +52,7 @@ export default function InTheNews() { loading='lazy' title='VIRTUAL PANEL: "AI in the Cloud - A Look at the Canadian-listed Smallcap Technology Sector"' width='560' - src='https://www.youtube-nocookie.com/embed/Cp_DPsdAqmg' + src='https://www.youtube.com/embed/Cp_DPsdAqmg' >
diff --git a/components/investors/investing-future.js b/components/investors/investing-future.js index ef1c0047..eefbe516 100644 --- a/components/investors/investing-future.js +++ b/components/investors/investing-future.js @@ -34,8 +34,8 @@ const SectionStyled = styled.section` } } .subtitle { - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.bold}; + font-family: ${({ theme }) => theme.font.name}, sans-serif; + font-weight: ${({ theme }) => theme.font.bold}; padding: 20px 0 10px 0; } } diff --git a/components/investors/preview.js b/components/investors/preview.js index c658cd0d..6204fcf5 100644 --- a/components/investors/preview.js +++ b/components/investors/preview.js @@ -24,8 +24,8 @@ const SectionStyled = styled.section` color: ${({ theme }) => theme.color.black}; cursor: pointer; display: block; - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.medium}; + font-family: ${({ theme }) => theme.font.name}, sans-serif; + font-weight: ${({ theme }) => theme.font.semiBold}; text-decoration: none; text-transform: uppercase; transition: color 0.25s ease-out; diff --git a/components/layout/footer.js b/components/layout/footer.js index a465e64c..77d34b9e 100644 --- a/components/layout/footer.js +++ b/components/layout/footer.js @@ -1,196 +1,290 @@ import Link from 'next/link' import styled from 'styled-components' -import { Facebook } from '@styled-icons/boxicons-logos/Facebook' +import { Github } from '@styled-icons/boxicons-logos/Github' import { Linkedin } from '@styled-icons/boxicons-logos/Linkedin' import { Twitter } from '@styled-icons/boxicons-logos/Twitter' -import ImgWebP from '../shared/img-webp' +import Button from '../shared/button' const StyleFooter = styled.footer` - background-color: #1e1e1e; - color: ${({ theme }) => theme.color.greyTextFooter}; - font-size: 0.9em; + background-color: ${({ theme }) => theme.color.blue}; position: relative; z-index: ${({ theme }) => theme.zIndex.footer}; - .footer__inner { - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - margin: 0 auto; - max-width: 1400px; - padding: 60px 20px 20px 20px; - @media ${({ theme }) => theme.breakpoint.xs} { - padding: 60px 40px 20px 40px; - } + .cta { + background-image: url('/images/components/fallback/footer-background.png'); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + color: ${({ theme }) => theme.color.white}; + margin: 0 auto ${({ theme }) => theme.spacing[6]}px auto; + padding: ${({ theme }) => theme.spacing[12]}px + ${({ theme }) => theme.spacing[2]}px; + text-align: center; @media ${({ theme }) => theme.breakpoint.sm} { - padding: 60px 50px 40px 50px; + margin: 0 auto ${({ theme }) => theme.spacing[8]}px auto; + } + @media ${({ theme }) => theme.breakpoint.md} { + margin: 0 auto ${({ theme }) => theme.spacing[10]}px auto; } @media ${({ theme }) => theme.breakpoint.lg} { - align-items: flex-start; - flex-direction: row; - flex-wrap: wrap; + margin: 0 auto ${({ theme }) => theme.spacing[12]}px auto; } - .footer__inner__about { - padding: 0 0 40px 0; - width: 100%; - p { - padding: 0 20px; - &:first-child { - color: ${({ theme }) => theme.color.white}; - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.medium}; - padding: 0 0 40px 0; - } - } - @media ${({ theme }) => theme.breakpoint.lg} { - box-sizing: border-box; - padding: 0 40px 40px 0; - width: 50%; - } + h2 { + margin: 0 auto ${({ theme }) => theme.spacing[2]}px auto; + text-transform: uppercase; } - .footer__inner__contact { - padding: 0 0 40px 0; + } + .content { + color: ${({ theme }) => theme.color.white}; + display: flex; + flex-wrap: wrap; + font-size: 0.9em; + justify-content: flex-start; + margin: 0 auto; + max-width: ${({ theme }) => theme.width.page}; + padding: ${({ theme }) => theme.spacing[2]}px; + .contact { + margin: 0 0 ${({ theme }) => theme.spacing[4]}px 0; + text-align: center; width: 100%; - p { - &:first-child { - color: ${({ theme }) => theme.color.white}; - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.medium}; - padding: 0 0 40px 0; - } - &:last-child { - padding: 40px 0 0 0; - } - } - @media ${({ theme }) => theme.breakpoint.lg} { + @media ${({ theme }) => theme.breakpoint.sm} { + text-align: left; width: 25%; } - } - .footer__inner__social { - padding: 0 0 40px 0; - width: 100%; - div { - align-items: center; - display: flex; - flex-direction: row; - justify-content: flex-start; - a { - color: ${({ theme }) => theme.color.greyTextFooter}; - margin: 0 10px; - transition: all 0.25s ease-out; - &:first-child { - margin: 0 10px 0 0; - &:hover { - color: #00acee; - } + ul { + list-style-type: none; + margin: 0; + padding: 0; + li { + margin: 0 0 ${({ theme }) => theme.spacing[1]}px 0; + a { + font-size: 0.9em; + color: ${({ theme }) => theme.color.white}; + text-decoration: none; } - &:nth-child(2) { - &:hover { - color: #3b5998; - } + p { + font-size: 0.9em; } - &:nth-child(3) { - &:hover { - color: #0e76a8; - } + } + .email { + a { + text-decoration: underline; } - svg { - height: 30px; - width: auto; + } + .privacy { + margin: 0 0 ${({ theme }) => theme.spacing[3]}px 0; + } + .social { + margin: 0 0 ${({ theme }) => theme.spacing[3]}px 0; + div { + align-items: center; + display: flex; + justify-content: center; + @media ${({ theme }) => theme.breakpoint.sm} { + justify-content: flex-start; + } + a { + margin: 0 ${({ theme }) => theme.spacing[1]}px 0 0; + svg { + max-width: 25px; + width: 100%; + } + } } } } - p { - color: ${({ theme }) => theme.color.white}; - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.medium}; - padding: 0 0 40px 0; + .line-break { + display: inline; + @media ${({ theme }) => theme.breakpoint.sm} { + display: none; + } } - @media ${({ theme }) => theme.breakpoint.lg} { - width: 25%; + .logo { + font-size: 1.75em; + font-weight: ${({ theme }) => theme.font.semiBold}; + line-height: 1em; + margin: 0 0 ${({ theme }) => theme.spacing[3]}px 0; } } - .footer__inner__legal { - font-size: 0.8em; - text-align: right; - width: 100%; - a { - color: ${({ theme }) => theme.color.greyTextFooter}; - font-family: ${({ theme }) => theme.font.copy.name}, sans-serif; - font-weight: ${({ theme }) => theme.font.copy.medium}; - text-decoration: none; + .pages { + box-sizing: border-box; + padding: 0 ${({ theme }) => theme.spacing[2]}px + ${({ theme }) => theme.spacing[4]}px 0; + width: 50%; + @media (min-width: 400px) { + width: 33%; + } + @media ${({ theme }) => theme.breakpoint.xs} { + width: 25%; } - @media ${({ theme }) => theme.breakpoint.lg} { - margin: 0 auto; - max-width: 1200px; + @media ${({ theme }) => theme.breakpoint.sm} { + width: 15%; + } + p { + font-size: 1em; + font-weight: ${({ theme }) => theme.font.bold}; + margin: 0 0 ${({ theme }) => theme.spacing[2]}px 0; + text-transform: uppercase; + } + ul { + list-style-type: none; + margin: 0; + padding: 0; + li { + margin: 0 0 ${({ theme }) => theme.spacing[1]}px 0; + a { + font-size: 0.9em; + color: ${({ theme }) => theme.color.white}; + text-decoration: none; + } + p { + font-size: 0.9em; + } + } } } + .end { + margin: 0; + } + } + .no-cta-spacing { + background-color: ${({ theme }) => theme.color.blue}; + height: ${({ theme }) => theme.spacing[6]}px; + width: 100%; } ` -export default function Footer({ noFooter }) { +export default function Footer({ noFooter, noFooterCTA }) { if (noFooter) { return null } return ( -
-
-

About

-

- EQ Works [www.eqworks.com] provides a smarter way to target - customers using Location Behavior. Using first-party, location-based - behavior signals, advanced data analytics, and proprietary software, - EQ Works creates and targets customized, performance-boosting - audience segments. Proprietary algorithms and data, combined with - Artificial Intelligence, generate attribution models that connect - consumer behavior in the physical world to behavior in the digital - world, helping solve complex challenges for brands - and agencies. -

+ {!noFooterCTA && ( +
+

LET'S GROW TOGETHER.

+
-
-

EQ Works Toronto

-

- 1235 Bay Street, Suite 401 -
- Toronto, ON M5R 3K4 -

-

Tel. +1 888-597-8889

+ )} + {noFooterCTA &&
} +
+
+

EQ WORKS

+
-
-

Find Us

-
- - - - - - - - - - - - - - - -
+ +
+

Info

+
-
-

- © {new Date().getFullYear()} EQ Works |{' '} - - Privacy Policy - {' '} - |{' '} - - Browser Opt-Out - -

+ +
+

Products

+ +
+ +
+

Insights

+ +
+ +
+

Company

+
diff --git a/components/layout/header.js b/components/layout/header.js index 4bd1a850..e4e7bacc 100644 --- a/components/layout/header.js +++ b/components/layout/header.js @@ -99,14 +99,27 @@ export default function Header() { /> + {/* react-slick */} + + + {/* site icons */} theme.breakpoint.sm} { - padding: calc(${({ theme }) => theme.height.navBarMD} / 2); - } -` - -const NO_HERO_ROUTES = [ - '/atom', - '/case-study/[slug]', - '/locus', - '/press-release/[slug]' -] const NO_FOOTER_ROUTES = ['/atom', '/locus'] +const NO_FOOTER_CTA_ROUTES = ['/contact'] export default function Layout(props) { const router = useRouter() @@ -45,11 +33,13 @@ export default function Layout(props) { <>
- - {NO_HERO_ROUTES.includes(router.pathname) && } + {props.children} -