{"version":3,"sources":["webpack:///./img/ui/patterns/section_background_dark_1.svg","webpack:///./img/ui/patterns/hero_background_1.svg","webpack:///./src/pages/shipamax-vs-traditional-ocr.tsx"],"names":["module","exports","ComparisonTablePage","_ref","_data$prismicComparis","_data$prismicHomePage","_page$hero_sub_title","_page$intro_text","_page$table_rows","_page$table_after","_page$ocr_content","_page$benefits_descri","_page$benefits_after","data","page","prismicComparisonTablePage","homePage","prismicHomePage","Error","renderValue","value","React","className","Layout","footerBackColor","Color","darkBlue","HelmetSeo","Hero","title","hero_title","subTitle","hero_sub_title","raw","customBackground","HeroCoverBackground","src","HERO_BACKGROUND_1","StyledSectionIntro","HorizontalContainer","maxWidth","StyledIntroWrap","intro_heading","FormattedRichText","render","intro_text","StyledSectionTable","style","textAlign","table_heading","StyledTable","cellPadding","cellSpacing","table_rows","map","row","key","table_row_title","table_row_value_shipamax","table_row_value_traditional","StyledTableAfter","onDark","table_after","fontSize","SectionQuotes","home","Section","ocr_heading","ocr_content","StyledSectionBenefits","benefits_heading","benefits_description","StyledBenefits","benefits","benefit","_benefit$benefit_desc","benefit_title","benefit_description","benefits_after","styled","withConfig","displayName","componentId","div","blue","SECTION_BACKGROUND_DARK_1","table","white","orange","lightGrey","cyan"],"mappings":"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","file":"component---src-pages-shipamax-vs-traditional-ocr-tsx-3a466dbf170d2567460f.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/section_background_dark_1-b9c4b7a3c30027b09bc6179de6bc00bb.svg\";","module.exports = __webpack_public_path__ + \"static/hero_background_1-eae493b5cec77934174f1866b2d56bd3.svg\";","import { graphql } from \"gatsby\";\nimport * as React from \"react\";\nimport styled from \"styled-components\";\n\nimport { unwrapFirst } from \"../util\";\nimport {\n  Layout,\n  Hero,\n  HeroCoverBackground,\n  HelmetSeo,\n  HorizontalContainer,\n  Section,\n  FormattedRichText,\n  SectionQuotes,\n} from \"../components/legacy\";\nimport HERO_BACKGROUND_1 from \"../../img/ui/patterns/hero_background_1.svg\";\nimport SECTION_BACKGROUND_DARK_1 from \"../../img/ui/patterns/section_background_dark_1.svg\";\nimport { Color } from \"../constants/legacy\";\n\ntype Props = {\n  data: GatsbyTypes.ComparisonTablePageQuery;\n};\n\nexport const query = graphql`\n  query ComparisonTablePage {\n    prismicComparisonTablePage {\n      data {\n        hero_title\n        hero_sub_title {\n          raw\n        }\n\n        intro_heading\n        intro_text {\n          raw\n        }\n\n        table_heading\n        table_rows {\n          table_row_title\n          table_row_value_shipamax\n          table_row_value_traditional\n        }\n        table_after {\n          raw\n        }\n\n        ocr_heading\n        ocr_content {\n          raw\n        }\n\n        benefits_heading\n        benefits_description {\n          raw\n        }\n        benefits {\n          benefit_title\n          benefit_description {\n            raw\n          }\n        }\n        benefits_after {\n          raw\n        }\n\n        cta_text\n        cta_detail_text\n        cta_button_label\n\n        seo_title\n        seo_description\n        share_image {\n          alt\n          dimensions {\n            width\n            height\n          }\n          url\n        }\n      }\n    }\n\n    prismicHomePage {\n      data {\n        ...SectionQuotesLegacy\n      }\n    }\n  }\n`;\n\nexport default function ComparisonTablePage({ data }: Props) {\n  const page = data.prismicComparisonTablePage?.data;\n  const homePage = data.prismicHomePage?.data;\n  if (!page || !homePage) throw new Error(\"page/homePage missing\");\n\n  const renderValue = (value: string | undefined) => {\n    if (value === \"Yes\") return <span className=\"glyph\">✅</span>;\n    if (value === \"No\") return <span className=\"glyph\">❌</span>;\n    return value;\n  };\n\n  return (\n    <Layout footerBackColor={Color.darkBlue}>\n      <HelmetSeo {...page} />\n\n      <Hero\n        title={page.hero_title || \"\"}\n        subTitle={page.hero_sub_title?.raw}\n        customBackground={<HeroCoverBackground src={HERO_BACKGROUND_1} />}\n      />\n\n      <StyledSectionIntro>\n        <HorizontalContainer maxWidth={740}>\n          <StyledIntroWrap>\n            <h2>{page.intro_heading}</h2>\n            <FormattedRichText render={page.intro_text?.raw} />\n          </StyledIntroWrap>\n        </HorizontalContainer>\n      </StyledSectionIntro>\n\n      <StyledSectionTable>\n        <HorizontalContainer maxWidth={740}>\n          <h2 style={{ textAlign: \"center\" }}>{page.table_heading}</h2>\n\n          <StyledTable cellPadding={0} cellSpacing={0}>\n            <thead>\n              <tr>\n                <th></th>\n                <th className=\"shipamax\">Shipamax</th>\n                <th>Traditional OCR</th>\n              </tr>\n            </thead>\n            <tbody>\n              {page.table_rows?.map((row) => {\n                if (!row) return null;\n                return (\n                  <tr key={row.table_row_title}>\n                    <td className=\"title\">{row.table_row_title}</td>\n                    <td>{renderValue(row.table_row_value_shipamax)}</td>\n                    <td>{renderValue(row.table_row_value_traditional)}</td>\n                  </tr>\n                );\n              })}\n            </tbody>\n          </StyledTable>\n\n          <StyledTableAfter>\n            <FormattedRichText\n              onDark\n              render={page.table_after?.raw}\n              fontSize={20}\n            />\n          </StyledTableAfter>\n        </HorizontalContainer>\n      </StyledSectionTable>\n\n      <SectionQuotes home={homePage} />\n\n      <Section>\n        <HorizontalContainer maxWidth={740}>\n          <h2>{page.ocr_heading}</h2>\n          <FormattedRichText render={page.ocr_content?.raw} />\n        </HorizontalContainer>\n      </Section>\n\n      <StyledSectionBenefits>\n        <HorizontalContainer>\n          <div className=\"limit-width\">\n            <h2>{page.benefits_heading}</h2>\n            <FormattedRichText onDark render={page.benefits_description?.raw} />\n          </div>\n          <StyledBenefits>\n            {(page.benefits || []).map((benefit) => {\n              if (!benefit) return null;\n              return (\n                <div key={benefit.benefit_title}>\n                  <h3>{benefit.benefit_title}</h3>\n                  <FormattedRichText\n                    onDark\n                    render={benefit.benefit_description?.raw}\n                  />\n                </div>\n              );\n            })}\n          </StyledBenefits>\n          <div className=\"limit-width\">\n            <FormattedRichText onDark render={page.benefits_after?.raw} />\n          </div>\n        </HorizontalContainer>\n      </StyledSectionBenefits>\n    </Layout>\n  );\n}\n\nconst StyledSectionIntro = styled(Section)`\n  background-color: #f8f8f8;\n`;\n\nconst StyledIntroWrap = styled.div`\n  text-align: center;\n`;\n\nconst StyledSectionTable = styled(Section)`\n  background-color: ${Color.blue};\n  color: #fff;\n  background-image: url(${SECTION_BACKGROUND_DARK_1});\n  background-size: cover;\n`;\n\nconst StyledTable = styled.table`\n  font-weight: 600;\n  color: #000000;\n  margin: 60px 0;\n\n  th,\n  td {\n    background-color: ${Color.white};\n    padding: 15px 18px;\n    border: #828282 solid;\n    border-width: 0 1px 1px 0;\n\n    @media (max-width: 600px) {\n      padding: 12px;\n    }\n  }\n\n  th {\n    font-size: 14px;\n    text-align: center;\n\n    &.shipamax {\n      background-color: ${Color.orange};\n      color: ${Color.white};\n    }\n  }\n\n  td {\n    background-color: ${Color.white};\n    font-size: 12px;\n    text-align: center;\n    width: 30%;\n    vertical-align: middle;\n\n    &.title {\n      background-color: ${Color.lightGrey};\n      text-align: left;\n      width: 40%;\n    }\n\n    span.glyph {\n      font-size: 14px;\n    }\n  }\n`;\n\nconst StyledTableAfter = styled.div`\n  text-align: center;\n`;\n\nconst StyledSectionBenefits = styled(Section)`\n  background-color: ${Color.darkBlue};\n  color: #fff;\n\n  .limit-width {\n    max-width: 520px;\n\n    h2 {\n      max-width: 330px;\n    }\n  }\n`;\n\nconst StyledBenefits = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  font-size: 15px;\n  margin-top: 40px;\n\n  > div {\n    width: 50%;\n    box-sizing: border-box;\n    padding-right: 80px;\n    margin-bottom: 20px;\n\n    h3 {\n      font-size: 15px;\n      margin-bottom: 5px;\n      color: ${Color.cyan};\n    }\n\n    @media (max-width: 900px) {\n      width: 100%;\n      padding-right: 0;\n    }\n  }\n`;\n"],"sourceRoot":""}