{"version":3,"sources":["webpack:///./src/styles/pages/landing-page-styles.js","webpack:///./src/components/atomic-design/organisms/landing-headers/header-and-form/styles.js","webpack:///./src/components/atomic-design/organisms/short-contact-form/short-form-input/styles.js","webpack:///./src/components/atomic-design/organisms/short-contact-form/short-form-input/index.js","webpack:///./src/components/atomic-design/organisms/short-contact-form/short-form-text-area/styles.js","webpack:///./src/components/atomic-design/organisms/short-contact-form/short-form-text-area/index.js","webpack:///./src/components/atomic-design/organisms/short-contact-form/styles.js","webpack:///./src/components/atomic-design/organisms/short-contact-form/index.js","webpack:///./src/components/atomic-design/organisms/landing-headers/header-and-form/index.js","webpack:///./src/templates/landing-page.js","webpack:///./src/components/core/faqs-tags/index.js","webpack:///./src/components/atomic-design/atoms/thank-you/styles.js","webpack:///./src/components/atomic-design/atoms/thank-you/index.js","webpack:///./src/components/atomic-design/atoms/page-header/styles.js","webpack:///./src/components/atomic-design/atoms/page-header/index.js","webpack:///./src/components/atomic-design/organisms/let-us-about-section/styles.js","webpack:///./src/components/atomic-design/organisms/let-us-about-section/index.js","webpack:///./src/components/atomic-design/atoms/button-gradient/index.js","webpack:///./src/components/atomic-design/organisms/faq-section/styles.js","webpack:///./src/components/atomic-design/organisms/faq-section/index.js","webpack:///./src/components/atomic-design/atoms/button-gradient/styles.js"],"names":["ImgContainer","styled","div","theme","newTheme","breakpoints","tabletLandscape","PageHeaderContainer","PageHeaderTextContainer","section","spacing","color","white","tablet","mobile","PageHeaderSubtitle","h1","font","title1","size","lineHeight","gradient","background","tertiary","main","weight","light","title2","title3","PageHeaderDescription","p","text1","grey","secondary","primary","BoxFormContainer","BoxForm","radius","colors","transparent","TitleWrapper","span","pitchBlack","bold","regular","ButtonContainer","Header","text","fonts","large","smallest","Container","Input","input","medium","weights","normal","sizes","longSM","largest","Label","label","small","heavy","ShortFormInput","required","type","name","value","onChange","placeholder","disabled","labelText","htmlFor","id","defaultProps","TextArea","textarea","longest","hoverButton","ShortFormTextarea","ErrorContainer","error","FormTitle","h5","title5","title6","Form","form","ShortContactForm","onSubmit","contactEmail","useState","loading","setLoading","setError","initialState","email","message","values","setValues","handleChange","target","sendGTMEvent","err","obj","window","dataLayer","push","event","Object","keys","reduce","a","c","handleSubmit","e","preventDefault","axios","method","url","process","data","FormData","href","HeaderAndForm","headerDescription","headerSubtitle","headerTitle","heroLogoId","showThankYou","setShowThankYou","contactData","useIsMobile","contentfulGeneralSettings","childContentfulGeneralSettingsContactPageJsonNode","scrollToContactForm","useScrollToForm","title","subTitle","documentToReactComponents","json","description","renderLineBreak","onclick","buttonTitle","containerSize","alt","fluid","width","fromContentful","contentful_id","padding","tabletLandscapeWidth","mobileHeight","smallMobileWidth","smallMobileHeight","height","emaildata","emails","coloredTitle","subtitle","textButton","to","landingPage","pageContext","faqList","faq","parseFaqsList","items","isMobile","formLandingStyle","layout","includes","showMenu","header","pageHeaderData","metatagTitle","heroLogo","partialPathName","ctaCopy","ariaLabel","variant","whiteNaNLogo","isHome","bodyType","metatagDescription","charSet","image","metatagImage","file","viewport","list","heroBackground","body","content","nodeType","options","richTextOptions","firstLetter","cta","bottomCtaTitle","bottomCtaText","scrollToForm","FaqsTag","props","faqScript","mainEntity","map","item","acceptedAnswer","ReactDOMServer","renderToString","JSON","stringify","Title","h4","headings","heading5","heading6","ColoredTitle","heading3","heading4","Subtitle","Span","args","icon","dark","icons","iconList","ThankYou","ContainerPageHeader","PageHeaderTitle","text2","h2","black","PageHeader","ContactUsContainer","ContactUsTextContainer","ContactUsH5","title4","ContactUsH6","h6","ContactUsButtonsContainer","indigo","StyledContactUsH5","LetUsAboutSection","showJoinTeamButton","aria-label","onClick","darkBlue","ButtonGradient","fullWidth","FaqsTitle","FaqSection","BackgroundGradient","css","shadow","transition","divider","backgroundColorStyles","border","button"],"mappings":"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","file":"component---src-templates-landing-page-js-5cced09700435c0668ab.js","sourcesContent":["import styled from 'styled-components';\n\nexport const ImgContainer = styled.div`\n  position: absolute;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n\n  div {\n    width: 100%;\n    height: 100%;\n  }\n\n  img {\n    background-position: center center;\n    background-attachment: fixed;\n    background-size: cover;\n    object-fit: cover;\n    height: 100%;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tabletLandscape}) {\n    height: 100vh;\n\n    div {\n      height: 100vh;\n    }\n  }\n`;\n\nexport const PageHeaderContainer = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n`;\n\nexport const PageHeaderTextContainer = styled.section`\n  width: 60%;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  flex-direction: column;\n  position: relative;\n  z-index: 1;\n  padding: ${({ theme }) => `${theme.newTheme.spacing(50)} 0 ${theme.newTheme.spacing(20)} 0`};\n\n  p {\n    color: ${({ theme }) => theme.newTheme.color.white};\n  }\n\n  b {\n    display: block;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    width: 70%;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    width: 100%;\n    height: auto;\n  }\n`;\n\nexport const PageHeaderSubtitle = styled.h1`\n  font-size: ${({ theme }) => theme.newTheme.font.title1.size};\n  line-height: ${({ theme }) => theme.newTheme.font.title1.lineHeight};\n  margin: -3px 0 0 0;\n  color: ${({ theme }) => theme.newTheme.color.white};\n\n  u {\n    text-decoration: none;\n    display: block;\n  }\n\n  b {\n    background: ${({ theme }) => theme.newTheme.color.gradient.background.tertiary.main};\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    font-weight: ${({ theme }) => theme.newTheme.font.weight.light};\n  }\n\n  p {\n    font-weight: ${({ theme }) => theme.newTheme.font.weight.light};\n    margin: 0;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    width: 100%;\n    font-size: ${({ theme }) => theme.newTheme.font.title2.size};\n    line-height: ${({ theme }) => theme.newTheme.font.title2.lineHeight};\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    font-size: ${({ theme }) => theme.newTheme.font.title3.size};\n    line-height: ${({ theme }) => theme.newTheme.font.title3.lineHeight};\n  }\n\n  @media only screen and (max-height: 700px) {\n    font-size: ${({ theme }) => theme.newTheme.font.title2.size};\n    line-height: ${({ theme }) => theme.newTheme.font.title2.lineHeight};\n  }\n`;\n\nexport const PageHeaderDescription = styled.p`\n  font-size: ${({ theme }) => theme.newTheme.font.text1.size};\n  line-height: ${({ theme }) => theme.newTheme.font.text1.lineHeight};\n  color: ${({ theme }) => theme.newTheme.color.grey.main};\n  margin-top: ${({ theme }) => theme.newTheme.spacing(10)};\n  width: 90%;\n  margin-bottom: ${({ theme }) => theme.newTheme.spacing(12)};\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    line-height: ${({ theme }) => theme.lineHeight.secondary};\n    width: 100%;\n  }\n`;\n\nexport const Triangle = styled.div`\n  z-index: 0;\n  border-top: ${({ theme }) => `5.106rem solid ${theme.newTheme.color.primary.main}`};\n  border-right: 100vw solid transparent;\n`;\n\nexport const StyledDiv = styled.div`\n  p:first-of-type:first-letter {\n    font-size: inherit;\n    line-height: inherit;\n    font-weight: inherit;\n    color: inherit;\n    padding-right: inherit;\n    padding-top: inherit;\n    float: left;\n  }\n`;\n","import styled from 'styled-components';\n\nexport const BoxFormContainer = styled.div`\n  width: 100%;\n  padding: 0 !important;\n  display: flex;\n  justify-content: center;\n`;\n\nexport const BoxForm = styled.div`\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  width: 50%;\n  border-radius: ${({ theme }) => theme.radius.main};\n  background-color: ${({ theme }) => theme.colors.transparent};\n  margin-bottom: ${({ theme }) => theme.newTheme.spacing(40)};\n  min-height: ${({ theme }) => theme.newTheme.spacing(200)};\n\n  background: rgba(255, 255, 255, 0.5);\n  border-radius: 16px;\n  backdrop-filter: blur(9.9px);\n  -webkit-backdrop-filter: blur(9.7px);\n\n  @media only screen and (${({ theme }) => theme.breakpoints.tabletLandscape}) {\n    padding-bottom: 0;\n    min-height: auto;\n    margin-bottom: ${({ theme }) => theme.newTheme.spacing(20)};\n    width: 60%;\n  }\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n    height: auto;\n    min-height: auto;\n    margin-bottom: ${({ theme }) => theme.newTheme.spacing(20)};\n    padding-bottom: 0;\n    width: 100%;\n  }\n`;\n\nexport const ImgContainer = styled.div`\n  position: absolute;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n\n  div {\n    width: 100%;\n    height: 100%;\n  }\n\n  img {\n    background-position: center center;\n    background-attachment: fixed;\n    background-size: cover;\n    object-fit: cover;\n    height: 100%;\n  }\n\n  margin-top: ${({ theme }) => theme.newTheme.spacing(32)};\n  padding-bottom: ${({ theme }) => theme.newTheme.spacing(32)};\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tabletLandscape}) {\n    height: 100vh;\n\n    div {\n      height: 100vh;\n    }\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    margin-top: ${({ theme }) => theme.newTheme.spacing(20)};\n    padding-bottom: 0;\n  }\n`;\n\nexport const TitleWrapper = styled.span`\n  text-align: center;\n  margin: 0 auto;\n  width: 100%;\n  div {\n    padding-top: 0;\n  }\n  h1 {\n    margin: ${({ theme }) => theme.newTheme.spacing(4)} 0;\n    color: ${({ theme }) => theme.newTheme.color.primary.main};\n  }\n  h2 {\n    text-align: center;\n    margin: 0 auto;\n    margin-bottom: 2rem;\n    width: 100%;\n    p {\n      color: ${({ theme }) => theme.newTheme.color.pitchBlack};\n      font-weight: ${({ theme }) => theme.newTheme.font.weight.bold};\n      line-height: ${({ theme }) => theme.newTheme.font.title1.lineHeight};\n      b {\n        display: block;\n        font-weight: ${({ theme }) => theme.newTheme.font.weight.bold};\n        width: ${({ theme }) => theme.newTheme.spacing(263)};\n      }\n    }\n  }\n  p {\n    text-align: center;\n    margin: 0 auto;\n    max-width: ${({ theme }) => theme.newTheme.spacing(263)};\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tabletLandscape}) {\n    padding-bottom: ${({ theme }) => theme.newTheme.spacing(10)};\n    margin: ${({ theme }) => theme.newTheme.spacing(10)} 0 0 0;\n    h2 {\n      p {\n        font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n        line-height: ${({ theme }) => theme.newTheme.font.title1.lineHeight};\n        b {\n          font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n          width: 100%;\n        }\n      }\n    }\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    padding-bottom: ${({ theme }) => theme.newTheme.spacing(10)};\n    h2 {\n      p {\n        font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n        line-height: ${({ theme }) => theme.newTheme.font.title3.lineHeight};\n        text-align: left;\n        b {\n          font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n          width: 100%;\n        }\n      }\n    }\n    h1 {\n      text-align: left;\n    }\n    p {\n      text-align: left;\n    }\n  }\n`;\n\nexport const ButtonContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  margin: ${({ theme }) => theme.newTheme.spacing(4)} 0 ${({ theme }) => theme.newTheme.spacing(3)};\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    section {\n      padding: ${({ theme }) => theme.newTheme.spacing(4)} 0;\n      justify-content: flex-start;\n      align-items: flex-start;\n    }\n  }\n`;\n\nexport const Header = styled.div`\n  width: 100%;\n  p,\n  span {\n    color: ${({ theme }) => theme.newTheme.color.grey.main};\n  }\n  h3 {\n    span:nth-child(1) {\n      background: ${({ theme }) => theme.newTheme.color.gradient.text};\n      -webkit-text-fill-color: transparent;\n      -webkit-background-clip: text;\n      background-clip: text;\n      margin-left: 0;\n      margin-bottom: ${({ theme }) => theme.newTheme.spacing(8)};\n    }\n  }\n  p:nth-child(2) {\n    color: ${({ theme }) => theme.fonts.colors.secondary};\n  }\n  span:nth-child(2) {\n    margin-top: ${({ theme }) => theme.spacing.large};\n  }\n  span:nth-child(2),\n  span:nth-child(3) {\n    color: ${({ theme }) => theme.fonts.colors.secondary};\n  }\n  p span:nth-child(1) {\n    color: ${({ theme }) => theme.fonts.colors.secondary};\n    @media only screen and (${({ theme }) => theme.breakpoints.tablet}) {\n      margin-left: ${({ theme }) => theme.spacing.smallest};\n    }\n    @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n      margin-left: 0;\n    }\n  }\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n    margin-bottom: ${({ theme }) => theme.newTheme.spacing(4)};\n    span:nth-child(1) {\n      margin-bottom: ${({ theme }) => theme.spacing.large};\n      margin-left: ${({ theme }) => theme.spacing.smallest};\n    }\n    span:nth-child(2),\n    span:nth-child(3) {\n      display: inline !important;\n    }\n    span:nth-child(3) {\n      margin-left: ${({ theme }) => theme.spacing.smallest};\n    }\n  }\n`;\n","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n  padding-bottom: ${({ theme }) => theme.spacing.large};\r\n\r\n  &:focus-within label {\r\n    color: ${({ theme }) => theme.colors.primary};\r\n  }\r\n`;\r\n\r\nexport const Input = styled.input`\r\n  width: 100%;\r\n  overflow: hidden;\r\n  margin: 0;\r\n  color: ${({ theme }) => theme.fonts.colors.primary};\r\n  padding-left: ${({ theme }) => theme.spacing.medium};\r\n  border-radius: ${({ theme }) => theme.radius.main};\r\n  font-style: normal;\r\n  font-weight: ${({ theme }) => theme.fonts.weights.normal};\r\n  font-size: ${({ theme }) => theme.fonts.sizes.primary};\r\n  line-height: ${({ theme }) => theme.spacing.longSM};\r\n  text-indent: ${({ theme }) => theme.spacing.medium};\r\n  padding: 0;\r\n  background-color: ${({ theme }) => theme.colors.white};\r\n  border-color: transparent;\r\n\r\n  &:focus {\r\n    color: ${({ theme }) => theme.fonts.colors.primary};\r\n    border: 2px solid ${({ theme }) => theme.colors.primary};\r\n    background-color: ${({ theme }) => theme.colors.white};\r\n    outline: none;\r\n  }\r\n\r\n  @media only screen and (${({ theme }) => theme.breakpoints.tablet}) {\r\n    line-height: ${({ theme }) => theme.spacing.largest};\r\n  }\r\n\r\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\r\n    line-height: ${({ theme }) => theme.spacing.largest};\r\n  }\r\n`;\r\n\r\nexport const Label = styled.label`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 0;\r\n  padding: 0;\r\n  margin-bottom: ${({ theme }) => theme.spacing.small};\r\n  font-style: normal;\r\n  font-weight: ${({ theme }) => theme.fonts.weights.heavy};\r\n  font-size: ${({ theme }) => theme.fonts.sizes.primary};\r\n  color: ${({ theme }) => theme.fonts.colors.tertiary};\r\n`;\r\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Container, Input, Label } from './styles';\n\nconst ShortFormInput = ({\n  label,\n  required,\n  type,\n  name,\n  value,\n  onChange,\n  placeholder,\n  disabled,\n}) => {\n  const labelText = required && label ? `${label}*` : label;\n  return (\n    <Container>\n      <Label htmlFor={name}>{labelText}</Label>\n      <Input\n        type={type}\n        id={name}\n        name={name}\n        value={value}\n        onChange={onChange}\n        placeholder={placeholder}\n        required={required}\n        disabled={disabled}\n      />\n    </Container>\n  );\n};\n\nShortFormInput.propTypes = {\n  label: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  type: PropTypes.string.isRequired,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.string.isRequired,\n  onChange: PropTypes.func.isRequired,\n  placeholder: PropTypes.string,\n  disabled: PropTypes.bool,\n};\n\nShortFormInput.defaultProps = {\n  required: false,\n  placeholder: '',\n  disabled: false,\n};\n\nexport default ShortFormInput;\n","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n  padding-bottom: ${({ theme }) => theme.spacing.large};\r\n\r\n  &:focus-within label {\r\n    color: ${({ theme }) => theme.colors.primary};\r\n  }\r\n`;\r\n\r\nexport const TextArea = styled.textarea`\r\n  resize: none;\r\n  width: 100%;\r\n  overflow-y: auto;\r\n  margin: 0;\r\n  color: ${({ theme }) => theme.fonts.colors.primary};\r\n  padding-left: ${({ theme }) => theme.spacing.medium};\r\n  border-radius: ${({ theme }) => theme.radius.main};\r\n  font-style: normal;\r\n  font-weight: ${({ theme }) => theme.fonts.weights.normal};\r\n  font-size: ${({ theme }) => theme.fonts.sizes.primary};\r\n  line-height: ${({ theme }) => theme.spacing.large};\r\n  padding: ${({ theme }) => theme.spacing.medium};\r\n  background-color: ${({ theme }) => theme.colors.white};\r\n  border: 2px solid transparent;\r\n  height: ${({ theme }) => theme.spacing.longest};\r\n  max-height: ${({ theme }) => theme.spacing.longest};\r\n\r\n  &:focus {\r\n    color: ${({ theme }) => theme.fonts.colors.primary};\r\n    border: 2px solid ${({ theme }) => theme.colors.primary};\r\n    background-color: ${({ theme }) => theme.colors.white};\r\n    outline: none;\r\n  }\r\n\r\n  ::-webkit-scrollbar {\r\n    width: ${({ theme }) => theme.spacing.small};\r\n  }\r\n\r\n  ::-webkit-scrollbar-track {\r\n    border-radius: ${({ theme }) => theme.spacing.small};\r\n  }\r\n\r\n  ::-webkit-scrollbar-thumb {\r\n    border-radius: ${({ theme }) => theme.spacing.small};\r\n    background-color: ${({ theme }) => theme.colors.hoverButton};\r\n  }\r\n\r\n  ::-webkit-scrollbar-thumb:window-inactive {\r\n    background-color: ${({ theme }) => theme.colors.hoverButton};\r\n  }\r\n\r\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\r\n    ::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const Label = styled.label`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 0;\r\n  padding: 0;\r\n  margin-bottom: ${({ theme }) => theme.spacing.small};\r\n  font-style: normal;\r\n  font-weight: ${({ theme }) => theme.fonts.weights.heavy};\r\n  font-size: ${({ theme }) => theme.fonts.sizes.primary};\r\n  color: ${({ theme }) => theme.fonts.colors.tertiary};\r\n`;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Container, TextArea, Label } from './styles';\r\n\r\nconst ShortFormTextarea = ({ label, type, name, value, onChange, required, placeholder }) => {\r\n  return (\r\n    <Container>\r\n      <Label htmlFor={name}>{label}</Label>\r\n      <TextArea\r\n        type={type}\r\n        id={name}\r\n        name={name}\r\n        value={value}\r\n        onChange={onChange}\r\n        label={label}\r\n        placeholder={placeholder}\r\n        required={required}\r\n      />\r\n    </Container>\r\n  );\r\n};\r\n\r\nShortFormTextarea.propTypes = {\r\n  label: PropTypes.string.isRequired,\r\n  required: PropTypes.bool,\r\n  type: PropTypes.string.isRequired,\r\n  name: PropTypes.string.isRequired,\r\n  value: PropTypes.string.isRequired,\r\n  placeholder: PropTypes.string.isRequired,\r\n  onChange: PropTypes.func.isRequired,\r\n};\r\n\r\nShortFormTextarea.defaultProps = {\r\n  required: false,\r\n};\r\nexport default ShortFormTextarea;\r\n","import styled from 'styled-components';\r\n\r\nexport const ButtonContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  width: 30%;\r\n`;\r\n\r\nexport const ErrorContainer = styled.p`\r\n  color: ${({ theme }) => theme.colors.error};\r\n`;\r\n\r\nexport const FormTitle = styled.h5`\r\n  margin: 0 0 ${({ theme }) => theme.newTheme.spacing(12)};\r\n  font-size: ${({ theme }) => theme.newTheme.font.title5.size};\r\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\r\n  line-height: ${({ theme }) => theme.newTheme.font.title5.lineHeight};\r\n  letter-spacing: 0em;\r\n  text-align: center;\r\n\r\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\r\n    font-size: ${({ theme }) => theme.newTheme.font.title6.size};\r\n    line-height: ${({ theme }) => theme.newTheme.font.title6.lineHeight};\r\n  }\r\n`;\r\n\r\nexport const Form = styled.form`\r\n  display: flex;\r\n  padding: ${({ theme }) => theme.newTheme.spacing(15)};\r\n  margin-bottom: ${({ theme }) => theme.spacing.longSM};\r\n  div {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-start;\r\n  }\r\n  @media only screen and (${({ theme }) => theme.breakpoints.tabletLandscape}) {\r\n    padding: ${({ theme }) => theme.spacing.largest};\r\n  }\r\n\r\n  @media only screen and (${({ theme }) => theme.breakpoints.tablet}) {\r\n    padding: ${({ theme }) => theme.spacing.large};\r\n  }\r\n\r\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\r\n    padding: ${({ theme }) => theme.spacing.large};\r\n  }\r\n`;\r\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport axios from 'axios';\n\nimport ShortFormInput from 'atomic-design/organisms/short-contact-form/short-form-input';\nimport ShortFormTextarea from 'atomic-design/organisms/short-contact-form/short-form-text-area';\nimport Button from 'atomic-design/atoms/button';\nimport { Form, ButtonContainer, ErrorContainer, FormTitle } from './styles';\n\nconst ShortContactForm = ({ onSubmit, contactEmail }) => {\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState('');\n\n  const initialState = {\n    name: '',\n    email: '',\n    message: '',\n  };\n\n  const [values, setValues] = useState(initialState);\n\n  const { name, email, message } = values;\n\n  const handleChange = ({ target }) => {\n    setValues({\n      ...values,\n      [target.name]: target.value,\n    });\n  };\n\n  const resetFields = () => {\n    setValues(initialState);\n  };\n\n  const getErrorValues = obj => {\n    return Object.keys(obj).reduce((a, c) => ((a[`${'error_'}${c}`] = obj[c]), a), {});\n  };\n\n  const sendGTMEvent = (err = false) => {\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n      event: `contact_${err ? 'error' : 'message'}`,\n      ...(err ? getErrorValues(values) : values),\n    });\n  };\n\n  const handleSubmit = async e => {\n    e.preventDefault();\n    setLoading(true);\n    try {\n      await axios({\n        method: 'post',\n        url: process.env.GATSBY_GETFORM_URL,\n        data: new FormData(e.target),\n      });\n      sendGTMEvent();\n      onSubmit();\n      resetFields();\n    } catch (e) {\n      sendGTMEvent(true);\n      setError(true);\n    }\n    setLoading(false);\n  };\n\n  return (\n    <Form name=\"contact\" onSubmit={handleSubmit}>\n      <div>\n        <FormTitle> {\"Let's come together to assist you and your team.\"}</FormTitle>\n        <ShortFormInput\n          type=\"text\"\n          name=\"name\"\n          value={name}\n          onChange={handleChange}\n          label=\"Name \"\n          required\n        />\n        <ShortFormInput\n          type=\"email\"\n          name=\"email\"\n          value={email}\n          onChange={handleChange}\n          label=\"E-mail \"\n          required\n        />\n        <ShortFormTextarea\n          type=\"text\"\n          name=\"message\"\n          value={message}\n          onChange={handleChange}\n          label=\"What can we do for you? *\"\n          placeholder=\"Tell us what can we help you with...\"\n          required\n        />\n        {error && (\n          <ErrorContainer>\n            Error sending message. Please write us to{' '}\n            <a href={`mailto:${contactEmail}`}>{contactEmail}</a>\n          </ErrorContainer>\n        )}\n        <ButtonContainer>\n          <Button type=\"submit\" disabled={loading}>\n            {loading ? 'Sending...' : 'Send'}\n          </Button>\n        </ButtonContainer>\n      </div>\n    </Form>\n  );\n};\n\nShortContactForm.propTypes = {\n  onSubmit: PropTypes.func.isRequired,\n  contactEmail: PropTypes.string.isRequired,\n};\n\nexport default ShortContactForm;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Image from 'core/image';\n\nimport PageHeader from 'atomic-design/atoms/page-header';\nimport ThankYou from 'atomic-design/atoms/thank-you';\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer';\nimport { renderLineBreak } from 'common/string-helpers';\nimport MainContainer from 'atomic-design/atoms/main-container';\nimport useIsMobile from 'hooks/useIsMobile';\nimport PageSection from 'atomic-design/atoms/page-section';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport {\n  BoxForm,\n  BoxFormContainer,\n  ImgContainer,\n  TitleWrapper,\n  Header,\n  ButtonContainer,\n} from './styles';\nimport ShortContactForm from 'atomic-design/organisms/short-contact-form';\nimport useScrollToForm from 'hooks/UseScrollToForm';\nimport BasicCallToAction from 'atomic-design/molecules/call-to-action/basic-call-to-action';\n\nconst HeaderAndForm = ({ headerDescription, headerSubtitle, headerTitle, heroLogoId }) => {\n  const [showThankYou, setShowThankYou] = useState(false);\n  const isMobile = useIsMobile('mobile');\n  const data = useStaticQuery(graphql`\n    query {\n      contentfulGeneralSettings {\n        childContentfulGeneralSettingsContactPageJsonNode {\n          emaildata {\n            emails {\n              email\n            }\n          }\n        }\n      }\n    }\n  `);\n  const contactData =\n    data.contentfulGeneralSettings.childContentfulGeneralSettingsContactPageJsonNode;\n  const scrollToContactForm = useScrollToForm('form[name=\"contact\"]');\n  return (\n    <>\n      <Header>\n        <MainContainer>\n          <TitleWrapper>\n            <PageHeader\n              title={headerSubtitle}\n              subTitle={documentToReactComponents(headerTitle.json)}\n              description={renderLineBreak(headerDescription.headerDescription)}\n            />\n            <ButtonContainer>\n              <BasicCallToAction\n                onclick={() => scrollToContactForm()}\n                buttonTitle={\"Let's get started!\"}\n              />\n            </ButtonContainer>\n          </TitleWrapper>\n        </MainContainer>\n      </Header>\n      <PageSection containerSize=\"fluid\">\n        <ImgContainer>\n          <Image\n            alt=\"people working in NaNLABS\"\n            fluid\n            width=\"100%\"\n            fromContentful\n            contentful_id={heroLogoId}\n            padding=\"0\"\n            tabletLandscapeWidth=\"inherit\"\n            mobileHeight=\"300px\"\n            smallMobileWidth=\"inherit\"\n            smallMobileHeight=\"300px\"\n            height=\"inherit\"\n          />\n        </ImgContainer>\n        <MainContainer>\n          <BoxFormContainer>\n            <BoxForm>\n              {!showThankYou && (\n                <ShortContactForm\n                  onSubmit={() => setShowThankYou(true)}\n                  contactEmail={contactData?.emaildata?.emails[0]?.email}\n                />\n              )}\n              {showThankYou && (\n                <ThankYou\n                  title=\"We’ll be in touch soon.\"\n                  coloredTitle=\"Thank you!\"\n                  subtitle=\"Meanwhile, you may want to look around.\"\n                  textButton=\"See what we’ve been up to\"\n                  to=\"/work\"\n                />\n              )}\n            </BoxForm>\n          </BoxFormContainer>\n        </MainContainer>\n      </PageSection>\n    </>\n  );\n};\n\nHeaderAndForm.propTypes = {\n  headerDescription: PropTypes.any,\n  headerSubtitle: PropTypes.string,\n  headerTitle: PropTypes.any,\n  heroLogoId: PropTypes.any,\n};\n\nexport default HeaderAndForm;\n","import React, { useRef } from 'react';\n\nimport PropTypes from 'prop-types';\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer';\n\nimport theme from 'styles/theme';\nimport Layout from 'core/layout';\nimport MetaTags from 'core/meta-tags/index';\nimport PageSection from 'atomic-design/atoms/page-section';\nimport ButtonGradient from 'atomic-design/atoms/button-gradient';\nimport MainContainer from 'atomic-design/atoms/main-container';\nimport {\n  PageHeaderContainer,\n  PageHeaderDescription,\n  PageHeaderSubtitle,\n  PageHeaderTextContainer,\n  ImgContainer,\n} from 'styles/pages/landing-page-styles';\nimport richTextOptions from 'common/rich-text-options';\nimport { renderLineBreak } from 'common/string-helpers';\nimport RichTextWrapper from 'atomic-design/organisms/rich-text-wrapper';\nimport LetUsAboutSection from 'atomic-design/organisms/let-us-about-section';\nimport { parseFaqsList } from 'common/transformers';\nimport FaqsTag from '../components/core/faqs-tags';\nimport FaqSection from 'atomic-design/organisms/faq-section';\nimport Image from 'core/image';\nimport useIsMobile from 'hooks/useIsMobile';\nimport HeaderAndForm from '../components/atomic-design/organisms/landing-headers/header-and-form';\n\nconst landingPage = ({ pageContext }) => {\n  landingPage.propTypes = {\n    pageContext: PropTypes.instanceOf(Object).isRequired,\n  };\n  const faqList = pageContext.faq && parseFaqsList(pageContext.faq.items);\n  const isMobile = useIsMobile('mobile');\n  const formLandingStyle = pageContext.layout && pageContext.layout.includes('with-form');\n  const showMenu = pageContext.showMenu;\n\n  const urlToRedirect =\n    pageContext.pageHeaderData.metatagTitle === 'AWS Infrastructure'\n      ? 'https://meetings.hubspot.com/nanlabs/aws-architecture-review'\n      : '/contact';\n\n  const header = formLandingStyle ? (\n    <HeaderAndForm\n      headerDescription={pageContext.pageHeaderData.headerDescription}\n      headerSubtitle={pageContext.pageHeaderData.headerSubtitle}\n      headerTitle={pageContext.pageHeaderData.headerTitle}\n      heroLogoId={pageContext.heroLogo.contentful_id}\n    />\n  ) : (\n    <>\n      <ImgContainer>\n        <Image\n          alt=\"people working in NaNLABS\"\n          fluid\n          width=\"100%\"\n          fromContentful={!isMobile}\n          contentful_id={!isMobile && pageContext.heroLogo.contentful_id}\n          partialPathName={isMobile && 'res-landing-page'}\n        />\n      </ImgContainer>\n      <MainContainer>\n        <PageHeaderContainer>\n          <PageHeaderTextContainer>\n            <PageHeaderSubtitle>\n              {documentToReactComponents(pageContext.pageHeaderData.headerTitle.json)}\n            </PageHeaderSubtitle>\n            <PageHeaderDescription>\n              {renderLineBreak(pageContext.pageHeaderData.headerDescription.headerDescription)}\n            </PageHeaderDescription>\n            <ButtonGradient\n              to={\n                pageContext.pageHeaderData.metatagTitle === 'AWS Infrastructure'\n                  ? 'https://meetings.hubspot.com/nanlabs/aws-architecture-review'\n                  : '/contact'\n              }\n              title={pageContext.pageHeaderData.ctaCopy}\n              ariaLabel=\"link to contact\"\n              variant=\"light\"\n            />\n          </PageHeaderTextContainer>\n        </PageHeaderContainer>\n      </MainContainer>\n    </>\n  );\n\n  return (\n    <Layout showMenu={showMenu} whiteNaNLogo={showMenu} isHome={!formLandingStyle} bodyType=\"xWide\">\n      <MetaTags\n        title={pageContext.pageHeaderData.metatagTitle}\n        description={pageContext.pageHeaderData.metatagDescription}\n        charSet=\"utf-8\"\n        image={`https:${pageContext.pageHeaderData.metatagImage.file.url}`}\n        viewport=\"width=device-width, initial-scale=1\"\n        type=\"website\"\n      />\n      {pageContext.faq && <FaqsTag list={faqList} />}\n      <PageSection\n        background={formLandingStyle ? theme.newTheme.color.white : pageContext.heroBackground}\n        containerSize=\"fluid\"\n      >\n        {header}\n      </PageSection>\n\n      <PageSection\n        containerSize={formLandingStyle ? 'sm' : 's'}\n        padding={`0 0 ${theme.newTheme.spacing(13)}`}\n      >\n        <RichTextWrapper\n          color={theme.newTheme.color.primary.main}\n          json={{\n            data: pageContext.body.json.data,\n            content: pageContext.body.json.content,\n            nodeType: pageContext.body.json.nodeType,\n          }}\n          options={richTextOptions}\n          firstLetter=\"normal\"\n        />\n      </PageSection>\n      {pageContext.faq && (\n        <PageSection containerSize=\"s\" padding={`0 0 ${theme.newTheme.spacing(20)} 0`}>\n          <FaqSection faqList={faqList} title={pageContext.faq.title} />\n        </PageSection>\n      )}\n\n      <LetUsAboutSection\n        title={pageContext.cta.bottomCtaTitle}\n        buttonTitle={pageContext.cta.cta.text}\n        subtitle={pageContext.cta.bottomCtaText.json}\n        background={pageContext.heroBackground}\n        scrollToForm={pageContext.layout && pageContext.layout.includes('scroll')}\n      />\n    </Layout>\n  );\n};\n\nexport default landingPage;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer';\nimport { Helmet } from 'react-helmet';\nimport ReactDOMServer from 'react-dom/server';\n\nconst FaqsTag = props => {\n  const { list } = props;\n\n  const mapFaqList = faqList =>\n    faqList.map(item => ({\n      '@type': 'Question',\n      name: item.title,\n      acceptedAnswer: {\n        '@type': 'Answer',\n        text: ReactDOMServer.renderToString(documentToReactComponents(item.description.json)),\n      },\n    }));\n\n  const faqScript = {\n    '@context': 'https://schema.org',\n    '@type': 'FAQPage',\n    mainEntity: mapFaqList(list),\n  };\n\n  return (\n    <Helmet>\n      <script type=\"application/ld+json\">{JSON.stringify(faqScript)}</script>\n    </Helmet>\n  );\n};\n\nFaqsTag.propTypes = {\n  list: PropTypes.array.isRequired,\n};\n\nexport default FaqsTag;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: column;\n  overflow: hidden;\n  margin: ${({ theme }) => theme.spacing.longest} ${({ theme }) => theme.spacing.longSM};\n\n  @media only screen and (${({ theme }) => theme.breakpoints.tablet}) {\n    margin: ${({ theme }) => theme.spacing.largest};\n  }\n\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n    margin: ${({ theme }) => theme.spacing.large};\n  }\n`;\n\nexport const Title = styled.h4`\n  font-weight: ${({ theme }) => theme.fonts.weights.normal};\n  font-size: ${({ theme }) => theme.fonts.sizes.headings.heading5};\n  line-height: ${({ theme }) => theme.lineHeight.secondary};\n  color: ${({ theme }) => theme.fonts.colors.primary};\n\n  @media only screen and (${({ theme }) => theme.breakpoints.tablet}) {\n    font-size: ${({ theme }) => theme.fonts.sizes.headings.heading6};\n  }\n\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n    font-size: ${({ theme }) => theme.fonts.sizes.headings.heading6};\n\n    span:nth-child(2) {\n      display: inline;\n      margin-left: ${({ theme }) => theme.spacing.smallest};\n    }\n  }\n`;\n\nexport const ColoredTitle = styled.span`\n  color: ${({ theme }) => theme.colors.primary};\n  font-size: ${({ theme }) => theme.fonts.sizes.headings.heading3};\n  font-weight: ${({ theme }) => theme.fonts.weights.bold};\n  display: block;\n  margin-bottom: ${({ theme }) => theme.spacing.small};\n\n  @media only screen and (${({ theme }) => theme.breakpoints.tablet}) {\n    font-size: ${({ theme }) => theme.fonts.sizes.headings.heading4};\n    margin-bottom: ${({ theme }) => theme.spacing.small};\n  }\n\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n    margin-bottom: ${({ theme }) => theme.spacing.small};\n  }\n`;\n\nexport const Subtitle = styled.p`\n  color: ${({ theme }) => theme.fonts.colors.secondary};\n  font-size: ${({ theme }) => theme.fonts.sizes.headings.heading6};\n  line-height: ${({ theme }) => theme.lineHeight.secondary};\n  margin-top: ${({ theme }) => theme.spacing.smallest};\n\n  span {\n    color: ${({ theme }) => theme.fonts.colors.secondary};\n  }\n\n  @media only screen and (${({ theme }) => theme.breakpoints.tablet}) {\n    font-size: ${({ theme }) => theme.fonts.sizes.secondary};\n    margin-bottom: ${({ theme }) => theme.spacing.large};\n  }\n\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n    font-size: ${({ theme }) => theme.fonts.sizes.secondary};\n  }\n`;\n\nexport const Span = styled.span`\n  font-weight: ${({ theme }) => theme.fonts.weights.normal};\n  display: block;\n`;\n","import React from 'react';\n\nimport SocialNetworkList from 'atomic-design/atoms/social-network-list';\nimport theme from 'styles/theme';\nimport iconList from 'domain/socialMediaIcons';\n\nimport { Container, Title, ColoredTitle, Subtitle, Span } from './styles';\n\nconst args = {\n  size: theme.fonts.sizes.icon,\n  color: theme.colors.icon.dark,\n};\n\nconst icons = iconList({ ...args });\n\nconst ThankYou = () => {\n  return (\n    <Container>\n      <Title>\n        <ColoredTitle>Thank you!</ColoredTitle>\n        Keep one eye on your inbox.\n        <Span>We’ll be in touch soon.</Span>\n      </Title>\n      <Subtitle>\n        Meanwhile, let’s connect on social?\n        <Span>Follow us and see what we’re up to:</Span>\n      </Subtitle>\n      <SocialNetworkList iconList={icons} />\n    </Container>\n  );\n};\n\nexport default ThankYou;\n","import styled from 'styled-components';\n\nexport const ContainerPageHeader = styled.div`\n  padding-top: ${({ theme }) => theme.newTheme.spacing(16)};\n  position: relative;\n  width: 100%;\n  z-index: 9;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    padding-top: ${({ theme }) => theme.newTheme.spacing(6)};\n  }\n`;\n\nexport const PageHeaderTitle = styled.h1`\n  font-size: ${({ theme }) => theme.newTheme.font.text1.size};\n  line-height: ${({ theme }) => theme.newTheme.font.text1.lineHeight};\n  color: ${({ theme }) => theme.newTheme.color.grey.light};\n  margin: 0;\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    font-size: ${({ theme }) => theme.newTheme.font.text2.size};\n    line-height: ${({ theme }) => theme.newTheme.font.text2.lineHeight};\n  }\n`;\n\nexport const PageHeaderSubtitle = styled.h2`\n  font-size: ${({ theme }) => theme.newTheme.font.title1.size};\n  line-height: ${({ theme }) => theme.newTheme.font.title1.lineHeight};\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n  margin: ${({ theme }) => theme.newTheme.spacing(10)} 0;\n  color: ${({ theme }) => theme.newTheme.color.black};\n  width: 80%;\n\n  u {\n    text-decoration: none;\n    display: block;\n  }\n\n  b {\n    background: ${({ color }) => color};\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  p {\n    margin: 0;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    width: 100%;\n    font-size: ${({ theme }) => theme.newTheme.font.title3.size};\n    line-height: ${({ theme }) => theme.newTheme.font.title3.lineHeight};\n  }\n`;\n\nexport const PageHeaderDescription = styled.p`\n  font-size: ${({ theme }) => theme.newTheme.font.text1.size};\n  line-height: ${({ theme }) => theme.newTheme.font.text1.lineHeight};\n  color: ${({ theme }) => theme.newTheme.color.grey.main};\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    line-height: ${({ theme }) => theme.lineHeight.secondary};\n  }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport theme from 'styles/theme';\n\nimport {\n  ContainerPageHeader,\n  PageHeaderTitle,\n  PageHeaderSubtitle,\n  PageHeaderDescription,\n} from './styles';\n\nconst PageHeader = ({ title, subTitle, description, color }) => {\n  return (\n    <ContainerPageHeader>\n      <PageHeaderTitle>{title}</PageHeaderTitle>\n      <PageHeaderSubtitle color={color}>{subTitle}</PageHeaderSubtitle>\n      {description && <PageHeaderDescription>{description}</PageHeaderDescription>}\n    </ContainerPageHeader>\n  );\n};\n\nPageHeader.propTypes = {\n  title: PropTypes.string.isRequired,\n  subTitle: PropTypes.string.isRequired,\n  description: PropTypes.string.isRequired,\n  color: PropTypes.string,\n};\n\nPageHeader.defaultProps = {\n  color: theme.newTheme.color.gradient.text,\n};\n\nexport default PageHeader;\n","import styled from 'styled-components';\n\nexport const ContactUsContainer = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    flex-direction: column;\n  }\n`;\n\nexport const ContactUsTextContainer = styled.div`\n  display: flex;\n  width: 60%;\n  padding-bottom: ${({ theme }) => `${theme.newTheme.spacing(12)}`};\n  padding-top: ${({ theme }) => `${theme.newTheme.spacing(12)}`};\n  flex-direction: column;\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    padding: 0;\n  }\n`;\n\nexport const ContactUsH5 = styled.h5`\n  font-size: ${({ theme }) => `${theme.newTheme.font.title4.size}`};\n  line-height: ${({ theme }) => `${theme.newTheme.font.title4.lineHeight}`};\n  font-weight: ${({ theme }) => `${theme.newTheme.font.weight.bold}`};\n  color: ${({ theme }) => `${theme.newTheme.color.white}`};\n  b {\n    color: ${({ theme }) => `${theme.newTheme.color.white}`};\n    b {\n      color: ${({ theme }) => `${theme.newTheme.color.white}`};\n    }\n  }\n\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n    font-size: ${({ theme }) => `${theme.newTheme.font.title5.size}`};\n    line-height: ${({ theme }) => `${theme.newTheme.font.title5.lineHeight}`};\n  }\n`;\n\nexport const ContactUsH6 = styled.h6`\n  margin-top: 0;\n  font-size: ${({ theme }) => `${theme.newTheme.font.title6.size}`};\n  line-height: ${({ theme }) => `${theme.newTheme.font.title6.lineHeight}`};\n\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n    font-size: ${({ theme }) => `${theme.newTheme.font.text1.size}`};\n    line-height: ${({ theme }) => `${theme.newTheme.font.text1.lineHeight}`};\n  }\n  b {\n    color: ${({ theme }) => `${theme.newTheme.color.white}`};\n    font-weight: ${({ theme }) => `${theme.newTheme.font.weight.bold}`};\n  }\n  p {\n    color: ${({ theme }) => `${theme.newTheme.color.white}`};\n    margin-bottom: 0;\n  }\n`;\n\nexport const ContactUsButtonsContainer = styled.div`\n  display: flex;\n  width: 40%;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-end;\n  padding-bottom: ${({ theme }) => `${theme.newTheme.spacing(12)}`};\n  padding-top: ${({ theme }) => `${theme.newTheme.spacing(12)}`};\n  gap: ${({ theme }) => `${theme.newTheme.spacing(10)}`};\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n    width: 100%;\n    align-items: start;\n  }\n\n  a:nth-child(2) {\n    button {\n      border: ${({ theme }) => `2px solid ${theme.newTheme.color.white}`} !important;\n      background: transparent;\n      color: ${({ theme }) => theme.newTheme.color.white};\n\n      &:hover {\n        background-color: ${({ theme }) => theme.newTheme.color.background.indigo};\n      }\n\n      @media only screen and (${({ theme }) => theme.newTheme.breakpoints.mobile}) {\n        &:hover {\n          background-color: transparent;\n        }\n      }\n    }\n  }\n`;\n\nexport const StyledContactUsH5 = styled(ContactUsH5)`\n  font-size: ${({ theme }) => `${theme.newTheme.font.title3.size}`};\n  line-height: ${({ theme }) => `${theme.newTheme.font.title3.lineHeight}`};\n  margin-bottom: 0;\n\n  @media only screen and (${({ theme }) => theme.breakpoints.mobile}) {\n    font-size: ${({ theme }) => `${theme.newTheme.font.title4.size}`};\n    line-height: ${({ theme }) => `${theme.newTheme.font.title4.lineHeight}`};\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer';\n\nimport Link from 'atomic-design/atoms/link';\nimport theme from 'styles/theme';\nimport PageSection from 'atomic-design/atoms/page-section';\nimport Button from 'atomic-design/atoms/button';\nimport {\n  ContactUsButtonsContainer,\n  ContactUsContainer,\n  ContactUsH5,\n  ContactUsH6,\n  ContactUsTextContainer,\n  StyledContactUsH5,\n} from './styles';\nimport BackgroundGradient from 'atomic-design/atoms/button-gradient/styles';\nimport ButtonGradient from 'components/atomic-design/atoms/button-gradient';\nimport useScrollToForm from 'hooks/UseScrollToForm';\n\nconst LetUsAboutSection = ({\n  title,\n  subtitle,\n  buttonTitle,\n  background,\n  scrollToForm,\n  showJoinTeamButton = true,\n}) => {\n  const scrollToContactForm = useScrollToForm('form[name=\"contact\"]');\n\n  return (\n    <PageSection background={background}>\n      <ContactUsContainer>\n        <ContactUsTextContainer>\n          {subtitle ? (\n            <>\n              <StyledContactUsH5>{title}</StyledContactUsH5>\n              <ContactUsH6>{documentToReactComponents(subtitle)}</ContactUsH6>\n            </>\n          ) : (\n            <ContactUsH5>{title}</ContactUsH5>\n          )}\n        </ContactUsTextContainer>\n        <ContactUsButtonsContainer>\n          {scrollToForm ? (\n            <BackgroundGradient variant=\"light\">\n              <Button\n                aria-label={'contact-button'}\n                variant=\"outlined\"\n                onClick={scrollToContactForm}\n              >\n                <span>{buttonTitle}</span>\n              </Button>\n            </BackgroundGradient>\n          ) : (\n            <>\n              <ButtonGradient variant=\"light\" title={buttonTitle} to=\"/contact\" />\n              {!subtitle && showJoinTeamButton && (\n                <Link to=\"/careers\">\n                  <Button variant=\"outlined\">Join our team</Button>\n                </Link>\n              )}\n            </>\n          )}\n        </ContactUsButtonsContainer>\n      </ContactUsContainer>\n    </PageSection>\n  );\n};\n\nLetUsAboutSection.propTypes = {\n  buttonTitle: PropTypes.string,\n  title: PropTypes.string.isRequired,\n  subtitle: PropTypes.instanceOf(Object),\n  background: PropTypes.string,\n  scrollToForm: PropTypes.bool,\n};\n\nLetUsAboutSection.defaultProps = {\n  buttonTitle: 'Tell us about your project',\n  subtitle: null,\n  background: theme.newTheme.color.background.darkBlue,\n};\n\nexport default LetUsAboutSection;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Link from 'atomic-design/atoms/link';\n\nimport Button from 'atomic-design/atoms/button';\nimport BackgroundGradient from './styles';\n\nconst ButtonGradient = ({ to, title, ariaLabel, variant, fullWidth, disabled }) => {\n  return (\n    <Link to={to}>\n      <BackgroundGradient variant={variant}>\n        <Button aria-label={ariaLabel} fullWidth={fullWidth} disabled={disabled}>\n          <span>{title}</span>\n        </Button>\n      </BackgroundGradient>\n    </Link>\n  );\n};\n\nButtonGradient.propTypes = {\n  to: PropTypes.string.isRequired,\n  title: PropTypes.string.isRequired,\n  ariaLabel: PropTypes.string,\n  variant: PropTypes.oneOf(['light', 'dark']),\n  fullWidth: PropTypes.bool,\n  disabled: PropTypes.bool,\n};\n\nButtonGradient.defaultProps = {\n  ariaLabel: '',\n  variant: 'dark',\n  fullWidth: false,\n  disabled: false,\n};\n\nexport default ButtonGradient;\n","import styled from 'styled-components';\n\nexport const FaqsTitle = styled.h2`\n  font-size: ${({ theme }) => theme.newTheme.font.title4.size};\n  line-height: ${({ theme }) => theme.newTheme.font.title4.lineHeight};\n  font-weight: ${({ theme }) => theme.newTheme.font.weight.regular};\n  margin: ${({ theme }) => theme.newTheme.spacing(10)} 0;\n  color: ${({ theme }) => theme.newTheme.color.black};\n\n  width: 80%;\n\n  u {\n    text-decoration: none;\n    display: block;\n  }\n\n  b {\n    background: ${({ color }) => color};\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  p {\n    margin: 0;\n  }\n\n  @media only screen and (${({ theme }) => theme.newTheme.breakpoints.tablet}) {\n    width: 100%;\n    font-size: ${({ theme }) => theme.newTheme.font.title5.size};\n    line-height: ${({ theme }) => theme.newTheme.font.title5.lineHeight};\n  }\n`;\n\nexport default FaqsTitle;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Accordion from 'atomic-design/molecules/accordion';\nimport FaqsTitle from './styles';\n\nconst FaqSection = ({ faqList, title }) => {\n  return (\n    <div id=\"faqs\">\n      <FaqsTitle>{title}</FaqsTitle>\n      <Accordion size=\"small\" list={faqList} />\n    </div>\n  );\n};\n\nFaqSection.propTypes = {\n  faqList: PropTypes.array.isRequired,\n  title: PropTypes.string.isRequired,\n};\n\nexport default FaqSection;\n","import styled, { css } from 'styled-components';\n\nconst backgroundColorStyles = (theme, variant) =>\n  ({\n    light: css`\n      background: ${theme.newTheme.color.white} !important;\n      box-shadow: ${theme.newTheme.shadow.main};\n      transition: ${theme.newTheme.transition.main};\n\n      button {\n        margin: 0 !important;\n        background: ${theme.newTheme.color.gradient.text};\n        font-weight: 500;\n        background-clip: text;\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        transition: ${theme.newTheme.transition.main};\n      }\n\n      span {\n        background: ${theme.newTheme.color.gradient.text};\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n      }\n\n      &:hover {\n        transition: ${theme.newTheme.transition.main};\n\n        button {\n          background: ${theme.newTheme.color.background.grey};\n          font-weight: 500;\n          background-clip: none;\n          -webkit-background-clip: none;\n          -webkit-text-fill-color: ${theme.newTheme.color.background.grey};\n          transition: ${theme.newTheme.transition.main};\n        }\n      }\n\n      &:active {\n        transition: ${theme.newTheme.transition.main};\n\n        button {\n          background: ${theme.newTheme.color.divider};\n          font-weight: 500;\n          background-clip: none;\n          -webkit-background-clip: none;\n          -webkit-text-fill-color: ${theme.newTheme.color.divider};\n          transition: ${theme.newTheme.transition.main};\n        }\n      }\n    `,\n    dark: css`\n      button {\n        color: ${theme.newTheme.color.white};\n        background: #4a4a4a !important;\n\n        span {\n          color: ${theme.newTheme.color.white};\n        }\n\n        &:active {\n          opacity: 0.8;\n        }\n\n        &:hover {\n          border: transparent;\n          background-color: transparent !important;\n          transition: ${theme.newTheme.transition.main};\n\n          @media only screen and (${props => props.theme.newTheme.breakpoints.tablet}) {\n            color: ${theme.newTheme.color.white};\n            background: ${theme.newTheme.color.grey.main} !important;\n          }\n        }\n      }\n    `,\n  }[variant]);\n\nconst BackgroundGradient = styled.div`\n  ${({ theme, variant }) => backgroundColorStyles(theme, variant)};\n  background: ${({ theme }) => theme.newTheme.color.gradient.text};\n  color: ${({ theme }) => theme.newTheme.color.white};\n  border-radius: ${({ theme }) => theme.newTheme.border.radius.button};\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  button {\n    ${({ theme }) => `padding: ${theme.newTheme.spacing(3)} ${theme.newTheme.spacing(6)}`};\n    border-radius: ${({ theme }) => theme.newTheme.border.radius.button};\n    border: transparent;\n    margin: 2px;\n  }\n`;\n\nexport default BackgroundGradient;\n"],"sourceRoot":""}