{"version":3,"sources":["webpack:///./src/templates/about-page.js","webpack:///./src/components/Banner.js","webpack:///./src/components/Content.js","webpack:///./src/img/search-icon.svg"],"names":["AboutPageTemplate","content","contentComponent","bannerImage","title","metaTitle","metaDescription","metaOGImage","bannerColor","bannerOverlay","PageContent","Content","name","property","overlay","overlayColor","image","className","ClickHandler","window","location","href","text","AboutPage","post","data","markdownRemark","frontmatter","aboutBannerImage","publicURL","pageMeta","OGImage","HTMLContent","html","aboutBannerColor","aboutBannerOverlay","BannerContainer","styled","div","props","backgroundColor","img","Gradient","color","SearchBar","input","SearchBarContainer","Banner","tagline","placeholder","submitSearch","search","searchValue","smallHeader","useState","searchTerm","setSearchTerm","onChange","event","target","value","onKeyDown","e","key","aria-label","onClick","src","SearchIcon","alt","dangerouslySetInnerHTML","__html","module","exports"],"mappings":"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","file":"component---src-templates-about-page-js-8d1b94340585c611bff1.js","sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { graphql } from 'gatsby'\nimport Layout from '../components/Layout'\nimport { Banner } from '../components/Banner'\nimport { Button } from '../components/Button'\nimport Content, { HTMLContent } from '../components/Content'\nimport { Helmet } from 'react-helmet'\n\nexport const AboutPageTemplate = ({\n  content,\n  contentComponent,\n  bannerImage,\n  title,\n  metaTitle,\n  metaDescription,\n  metaOGImage,\n  bannerColor,\n  bannerOverlay,\n}) => {\n  const PageContent = contentComponent || Content\n\n  return (\n    <>\n      <Helmet>\n        <title>{metaTitle}</title>\n        <meta name=\"description\" content={metaDescription} />\n        <meta property=\"og:image\" content={metaOGImage} />\n      </Helmet>\n      <Banner\n        overlay={bannerOverlay}\n        overlayColor={bannerColor}\n        title={title}\n        image={bannerImage}\n      />\n      <section className=\"section section--bg\">\n        <div className=\"container container--sm\">\n          <PageContent className=\"content\" content={content} />\n          <Button\n            ClickHandler={() => (window.location.href = '/case-studies')}\n            text=\"Read Case Studies\"\n          />\n        </div>\n      </section>\n    </>\n  )\n}\n\nAboutPageTemplate.propTypes = {\n  content: PropTypes.string,\n  contentComponent: PropTypes.func,\n}\n\nconst AboutPage = ({ data }) => {\n  const { markdownRemark: post } = data\n\n  return (\n    <Layout>\n      <AboutPageTemplate\n        title={post.frontmatter.title}\n        bannerImage={post.frontmatter.aboutBannerImage.publicURL}\n        metaTitle={post.frontmatter.pageMeta.metaTitle}\n        metaDescription={post.frontmatter.pageMeta.metaDescription}\n        metaOGImage={post.frontmatter.pageMeta.OGImage.publicURL}\n        contentComponent={HTMLContent}\n        content={post.html}\n        bannerColor={post.frontmatter.aboutBannerColor}\n        bannerOverlay={post.frontmatter.aboutBannerOverlay}\n      />\n    </Layout>\n  )\n}\n\nAboutPage.propTypes = {\n  data: PropTypes.object.isRequired,\n}\n\nexport default AboutPage\n\nexport const aboutPageQuery = graphql`\n  query AboutPage($id: String!) {\n    markdownRemark(id: { eq: $id }) {\n      html\n      frontmatter {\n        pageMeta {\n          metaTitle\n          metaDescription\n          OGImage {\n            publicURL\n          }\n        }\n        title\n        aboutBannerOverlay\n        aboutBannerColor\n        aboutBannerImage {\n          publicURL\n        }\n      }\n    }\n  }\n`\n","import React, { useState } from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport SearchIcon from '../img/search-icon.svg'\n\nconst BannerContainer = styled.div`\n  background: ${(props) =>\n    props.backgroundColor\n      ? props.backgroundColor\n      : 'linear-gradient(45deg, #282955, #1d3557)'};\n  background-image: ${(props) => (props.img ? `url(${props.img})` : '')};\n  width: 100%;\n  min-height: 400px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  position: relative;\n  background-position: center center;\n  text-align: center;\n  padding: 24px;\n\n  * {\n    color: #ffffff;\n    z-index: 1;\n    position: relative;\n  }\n\n  .tagline {\n    margin-bottom: 0;\n    color: hsla(0, 0%, 100%, 0.7);\n  }\n\n  @media (max-width: 767px) {\n    min-height: 300px;\n  }\n`\n\nconst Gradient = styled.div`\n  background: ${(props) =>\n    props.color ? props.color : 'linear-gradient(45deg, #282955, #1d3557)'};\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  left: 0;\n  top: 0;\n  z-index: 0;\n  opacity: 0.8;\n`\n\nconst SearchBar = styled.input`\n  background: #ffffff;\n  border: none;\n  border-radius: 4px;\n  appearance: none;\n  padding: 18px;\n  font-size: 18px;\n  margin: 0;\n  width: 100%;\n  color: #282955;\n  box-shadow: 0 8px 32px 0 rgb(40 41 85 / 15%);\n`\n\nconst SearchBarContainer = styled.div`\n  position: relative;\n  margin-top: 24px;\n  width: 500px;\n  max-width: 100%;\n\n  @media (max-width: 767px) {\n    margin-bottom : 24px;\n  }\n\n  button {\n    appearance: none;\n    position: absolute;\n    margin: 0;\n    right: 24px;\n    border: none;\n    background: none;\n    padding: 0;\n    top: 16px;\n    cursor: pointer;\n  }\n\n  img {\n    width: 24px;\n  }\n`\n\nexport const Banner = ({\n  title,\n  tagline,\n  image,\n  placeholder = 'Enter your search term...',\n  submitSearch,\n  search = false,\n  searchValue = '',\n  smallHeader = false,\n  overlayColor,\n  overlay,\n}) => {\n  const [searchTerm, setSearchTerm] = useState(searchValue)\n\n  const handleChange = (event) => {\n    setSearchTerm(event.target.value)\n  }\n\n  const handleKeyDown = (e) => {\n    if (e.key === 'Enter') {\n      submitSearch(searchTerm)\n    }\n  }\n\n  return (\n    <BannerContainer backgroundColor={overlayColor} img={image}>\n      {overlay && <Gradient color={overlayColor} img={image} />}\n      <div className=\"container\">\n        {tagline && <p className=\"text--lg tagline\">{tagline}</p>}\n        <h1 className={!smallHeader ? 'h1--big' : null}>{title}</h1>\n      </div>\n\n      {search && (\n        <SearchBarContainer>\n          <SearchBar\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            aria-label=\"Search bar\"\n          />\n          <button\n            onClick={() => submitSearch(searchTerm)}\n            onKeyDown={() => submitSearch(searchTerm)}\n          >\n            <img src={SearchIcon} alt=\"Search icon\" />\n          </button>\n        </SearchBarContainer>\n      )}\n    </BannerContainer>\n  )\n}\n\nBanner.propTypes = {\n  title: PropTypes.string,\n  image: PropTypes.string,\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nexport const HTMLContent = ({ content, className }) => (\n  <div className={className} dangerouslySetInnerHTML={{ __html: content }} />\n)\n\nconst Content = ({ content, className }) => (\n  <div className={className}>{content}</div>\n)\n\nContent.propTypes = {\n  content: PropTypes.node,\n  className: PropTypes.string,\n}\n\nHTMLContent.propTypes = Content.propTypes\n\nexport default Content\n","module.exports = \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyLjAwNSA1MTIuMDA1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIuMDA1IDUxMi4wMDU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjNTU1N2NkIiBkPSJNNTA1Ljc0OSw0NzUuNTg3bC0xNDUuNi0xNDUuNmMyOC4yMDMtMzQuODM3LDQ1LjE4NC03OS4xMDQsNDUuMTg0LTEyNy4zMTdjMC0xMTEuNzQ0LTkwLjkyMy0yMDIuNjY3LTIwMi42NjctMjAyLjY2Nw0KCQkJUzAsOTAuOTI1LDAsMjAyLjY2OXM5MC45MjMsMjAyLjY2NywyMDIuNjY3LDIwMi42NjdjNDguMjEzLDAsOTIuNDgtMTYuOTgxLDEyNy4zMTctNDUuMTg0bDE0NS42LDE0NS42DQoJCQljNC4xNiw0LjE2LDkuNjIxLDYuMjUxLDE1LjA4Myw2LjI1MXMxMC45MjMtMi4wOTEsMTUuMDgzLTYuMjUxQzUxNC4wOTEsNDk3LjQxMSw1MTQuMDkxLDQ4My45MjgsNTA1Ljc0OSw0NzUuNTg3eg0KCQkJIE0yMDIuNjY3LDM2Mi42NjljLTg4LjIzNSwwLTE2MC03MS43NjUtMTYwLTE2MHM3MS43NjUtMTYwLDE2MC0xNjBzMTYwLDcxLjc2NSwxNjAsMTYwUzI5MC45MDEsMzYyLjY2OSwyMDIuNjY3LDM2Mi42Njl6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=\""],"sourceRoot":""}