{"version":3,"file":"component---src-pages-contact-js-ada1aa8de104b7a7f232.js","mappings":"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","sources":["webpack://supergood.software/./src/pages/contact.js"],"sourcesContent":["/** @jsx jsx */\nimport { jsx } from '@emotion/react'\nimport React, { useLayoutEffect, useEffect, useRef, useState } from 'react'\nimport styled from '@emotion/styled'\nimport mq from '../styles/mediaQueries'\nimport { useInView } from 'react-intersection-observer'\n\nimport Footer from '../components/Footer'\nimport NavBar from '../components/NavBar'\nimport NavOverlay from '../components/NavOverlay'\nimport Layout from '../components/Layout'\nimport ContactForm from '../components/ContactForm'\nimport Seo from '../components/seo'\n\nimport GithubSVG from '../assets/icons/github.svg'\nimport TwitterSVG from '../assets/icons/twitter.svg'\n\nimport { Body1, Headline2, Headline4 } from '../components/Typography'\n\nconst researchTopics = [\n  'our favourite GIFs',\n  'new coffee gear',\n  'mechanical keyboards',\n  'brain pills',\n  'sacred geometry',\n]\n\nconst GithubIcon = props => {\n  const StyledGithub = styled(GithubSVG)`\n    width: 24px;\n    height: 24px;\n    display: inline-block;\n    margin-right: 23px;\n\n    path {\n      fill: var(--terminal-500);\n    }\n  `\n\n  return (\n    <a href=\"https://github.com/SuperGoodSoft\">\n      <StyledGithub {...props} />\n    </a>\n  )\n}\n\nconst TwitterIcon = props => {\n  const StyledTwitter = styled(TwitterSVG)`\n    width: 24px;\n    height: 24px;\n    display: inline-block;\n\n    path {\n      fill: var(--terminal-500);\n    }\n  `\n\n  return (\n    <a href=\"https://twitter.com/supergoodsoft\">\n      <StyledTwitter {...props} />\n    </a>\n  )\n}\n\nconst HeroBackgroundWrapper = styled.div`\n  background: linear-gradient(90.9deg, #2e60ff 0%, rgba(46, 96, 255, 0) 99.36%),\n    #0000fe;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  visibility: ${props => (props.isOverlayOpen ? 'hidden' : 'unset')};\n  opacity: ${props => (props.isOverlayOpen ? '0' : 'unset')};\n`\n\nconst GradientBackgroundWrapper = styled.div`\n  background: linear-gradient(90.9deg, #2e60ff 0%, rgba(46, 96, 255, 0) 99.36%),\n    #0000fe;\n  height: 100px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  visibility: ${props => (props.isOverlayOpen ? 'hidden' : 'unset')};\n  opacity: ${props => (props.isOverlayOpen ? '0' : 'unset')};\n`\n\nconst WhiteBackgroundWrapper = styled.div`\n  height: auto;\n  clip-path: inset(0 0 0 0);\n`\n\nconst ContactFormWrapper = styled.div`\n  ${mq({\n    gridColumnStart: ['1', '1', '2', '2', '2'],\n    gridColumnEnd: ['5', '9', '12', '12', '12'],\n  })};\n  margin-bottom: -400px;\n  z-index: 1;\n  position: relative;\n`\n\nconst HeroText = styled.h1`\n  ${Headline2};\n  color: var(--terminal-0);\n  margin-block-start: 0;\n  margin-block-end: 0;\n  display: inline;\n`\n\nconst HeroWrapper = styled.div`\n  padding-right: 12px;\n  padding-bottom: 6px;\n  overflow: hidden;\n  ${mq({\n    gridColumnStart: ['1', '1', '1', '1', '1'],\n    gridColumnEnd: ['5', '9', '13', '13', '13'],\n  })};\n`\n\nconst InnerHeroWrapper = styled.div`\n  position: relative;\n  animation-delay: 10s;\n  visibility: hidden;\n\n  @keyframes grow-in-steps {\n    0% {\n      visibility: hidden;\n    }\n    100% {\n      bottom: 0;\n      visibility: visible;\n    }\n  }\n`\n\nconst HeroSpan = styled.span`\n  color: ${props => (props.blue ? 'var(--screen-300)' : 'var(--terminal-0)')};\n\n  .crossed-out {\n    color: var(--screen-400);\n    text-decoration: line-through 5px;\n    display: inline-block;\n  }\n`\n\nconst Spacer = styled.div`\n  height: 400px;\n  grid-column: 1 /-1;\n`\n\nconst ContactText = styled.div`\n  text-align: center;\n  ${mq({\n    gridColumn: ['1 / -1', '1 / -1', '5 / 9', '5 / 9', '5 / 9'],\n  })};\n\n  h4 {\n    ${Headline4};\n    color: var(--terminal-500);\n  }\n\n  p {\n    ${Body1};\n    color: var(--terminal-400);\n  }\n\n  a {\n    text-decoration: none;\n  }\n`\n\nfunction ContactPage() {\n  const [isOverlayOpen, setIsOverlayOpen] = useState(false)\n  const [pixels, setPixels] = useState(0)\n  const [contactFormRef, contactFormInView] = useInView({\n    triggerOnce: true,\n    rootMargin: '200px 0px',\n  })\n  const [randomResearchTopic, setRandomResearchTopic] = useState('')\n  const pageTitle = 'Contact Us'\n\n  const ref = useRef()\n\n  useEffect(() => {\n    window.alreadyAnimated = true\n  }, [])\n\n  useLayoutEffect(() => {\n    const whiteText = document.getElementById('white')\n    const blueText = document.getElementById('blue')\n\n    const numLines =\n      whiteText.getClientRects().length + blueText.getClientRects().length\n    const height = ref.current.offsetHeight\n\n    if (window.alreadyAnimated) {\n      ref.current.style.display = 'block'\n      ref.current.style.bottom = 'unset'\n      ref.current.style.visibility = 'visible'\n    } else {\n      ref.current.style.display = 'block'\n      ref.current.style.bottom = `${-height}px`\n      ref.current.style.animation = `grow-in-steps ${numLines /\n        4}s steps(${numLines}, start) forwards 0.5s`\n    }\n\n    setRandomResearchTopic(\n      researchTopics[Math.floor(Math.random() * researchTopics.length)]\n    )\n  }, [])\n\n  return (\n    <React.Fragment>\n      <Seo\n        title={pageTitle}\n        description=\"To learn more about our development team, contact us by email or filling out our form.\"\n        keywords={[\n          `Ruby on Rails`,\n          `Rails`,\n          `React`,\n          `Spree`,\n          `Solidus`,\n          `eCommerce`,\n        ]}\n      />\n      <NavBar\n        isOverlayOpen={isOverlayOpen}\n        setIsOverlayOpen={setIsOverlayOpen}\n        pixels={pixels}\n        setPixels={setPixels}\n        theme={'blue'}\n        invertedBelow={true}\n        title={pageTitle}\n      />\n      <NavOverlay\n        isOverlayOpen={isOverlayOpen}\n        setIsOverlayOpen={setIsOverlayOpen}\n      />\n      <HeroBackgroundWrapper isOverlayOpen={isOverlayOpen}>\n        <Layout>\n          <HeroWrapper>\n            <InnerHeroWrapper ref={ref}>\n              <HeroText>\n                <HeroSpan id=\"white\">Is it time? Let’s talk.</HeroSpan>\n                <br />\n                <HeroSpan blue={true} id=\"blue\">\n                  We’re likely at our computers right now, researching{' '}\n                  <div className={'crossed-out'}>{randomResearchTopic}</div>{' '}\n                  important web development stuff.\n                </HeroSpan>\n              </HeroText>\n            </InnerHeroWrapper>\n          </HeroWrapper>\n        </Layout>\n      </HeroBackgroundWrapper>\n      <GradientBackgroundWrapper isOverlayOpen={isOverlayOpen}>\n        <Layout>\n          <ContactFormWrapper ref={contactFormRef}>\n            {contactFormInView ? <ContactForm /> : null}\n          </ContactFormWrapper>\n        </Layout>\n      </GradientBackgroundWrapper>\n      <WhiteBackgroundWrapper>\n        <NavBar\n          isOverlayOpen={isOverlayOpen}\n          setIsOverlayOpen={setIsOverlayOpen}\n          pixels={pixels}\n          setPixels={setPixels}\n          theme={'day'}\n          invertedAbove={true}\n          title={pageTitle}\n        />\n        <Layout>\n          <Spacer />\n          <ContactText>\n            <h4>\n              We're a remote-first team with <br />\n              headquarters in Victoria, Canada\n            </h4>\n            <p>\n              2031 Store Street <br />\n              Victoria, BC, Canada, V8T 5L9 <br />\n              <a href=\"mailto:contact@super.gd\">contact@super.gd</a>\n            </p>\n            <GithubIcon />\n            <TwitterIcon />\n          </ContactText>\n          <Footer copyrightYear={'2021'} />\n        </Layout>\n      </WhiteBackgroundWrapper>\n    </React.Fragment>\n  )\n}\n\nexport default ContactPage\n"],"names":["researchTopics","GithubIcon","props","StyledGithub","GithubSVG","href","TwitterIcon","StyledTwitter","TwitterSVG","HeroBackgroundWrapper","isOverlayOpen","GradientBackgroundWrapper","WhiteBackgroundWrapper","ContactFormWrapper","mq","gridColumnStart","gridColumnEnd","HeroText","Headline2","HeroWrapper","InnerHeroWrapper","HeroSpan","blue","Spacer","ContactText","gridColumn","Headline4","Body1","useState","setIsOverlayOpen","pixels","setPixels","useInView","triggerOnce","rootMargin","contactFormRef","contactFormInView","randomResearchTopic","setRandomResearchTopic","pageTitle","ref","useRef","useEffect","window","alreadyAnimated","useLayoutEffect","whiteText","document","getElementById","blueText","numLines","getClientRects","length","height","current","offsetHeight","style","display","bottom","visibility","animation","Math","floor","random","title","description","keywords","theme","invertedBelow","id","className","invertedAbove","copyrightYear"],"sourceRoot":""}