{"version":3,"sources":["webpack:///./src/pages/docrouter.tsx"],"names":["DocRouterPage","_ref","_data$prismicDocroute","_page$hero_main_svg","_page$transform_point","data","page","prismicDocrouterPage","Error","scrollToForm","ev","_document$getElementB","document","getElementById","scrollIntoView","behavior","block","preventDefault","React","Layout","footerBackColor","Color","newDark2","HelmetSeo","Section","PageMaxWidth","Gutter","size","Grid","alignColumns","reverseColumns","Column","MaxWidth","width","src","hero_main_svg","url","alt","Text","typeface","as","bold","hero_title","HorizontalAlign","align","Button","colorTheme","label","hero_button_label","onClick","href","CurvedSectionDivider","position","frontColor","backColor","background","tint","color","transform_heading","justifyColumns","transform_points","map","point","i","_page$transform_point2","_page$transform_point3","_page$transform_point4","_point$transform_poin","length","StyledTransformPoint","$last","transform_point_text","md","transform_point_svg","benefits","benefits_heading","benefit","_benefit$benefit_svg","StyledBenefit","benefit_text","className","benefit_svg","Visibility","hideAbove","prompt_text","hideBelow","prompt_button_label","CurvedSectionDividerGlow","glowColor","features","features_heading","slice","Math","ceil","f","BulletTick","key","feature_text","id","StyledFormWrap","form_heading","height","frameBorder","allowTransparency","style","border","margin","styled","withConfig","displayName","componentId","p","Dimen","gutterWidth","breakpointDownMd","div","light1"],"mappings":"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","file":"component---src-pages-docrouter-tsx-14e222dcb6296634dc14.js","sourcesContent":["import { graphql } from \"gatsby\";\nimport { RichText } from \"prismic-reactjs\";\nimport * as React from \"react\";\nimport styled from \"styled-components\";\n\nimport {\n  BulletTick,\n  Button,\n  Column,\n  CurvedSectionDivider,\n  CurvedSectionDividerGlow,\n  FormattedText,\n  Grid,\n  Gutter,\n  HelmetSeo,\n  HorizontalAlign,\n  Layout,\n  Line,\n  MaxWidth,\n  PageMaxWidth,\n  Section,\n  Text,\n  Visibility,\n} from \"../components\";\nimport { DocRouterIllustration } from \"../components/docrouter\";\nimport { Color, Dimen } from \"../constants\";\n\ntype Props = {\n  data: GatsbyTypes.DocRouterPageQuery;\n};\n\nexport const query = graphql`\n  query DocRouterPage {\n    prismicDocrouterPage {\n      data {\n        hero_title\n        hero_button_label\n        hero_main_svg {\n          url\n        }\n\n        transform_heading\n        transform_points {\n          transform_point_svg {\n            url\n          }\n          transform_point_text\n        }\n\n        benefits_heading\n        benefits {\n          benefit_svg {\n            url\n          }\n          benefit_text\n        }\n\n        prompt_text\n        prompt_button_label\n\n        features_heading\n        features {\n          feature_text\n        }\n\n        form_heading\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`;\n\nexport default function DocRouterPage({ data }: Props) {\n  const page = data.prismicDocrouterPage?.data;\n  if (!page) throw new Error(\"page missing\");\n\n  const scrollToForm = (ev: React.SyntheticEvent) => {\n    document\n      .getElementById(\"form\")\n      ?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n    ev.preventDefault();\n  };\n\n  return (\n    <Layout footerBackColor={Color.newDark2}>\n      <HelmetSeo {...page} />\n\n      <Section>\n        <PageMaxWidth>\n          <Gutter size={3} />\n          <Grid alignColumns=\"center\" reverseColumns>\n            <Column size={6}>\n              <MaxWidth width={528}>\n                <img src={page.hero_main_svg?.url} alt=\"\" />\n              </MaxWidth>\n            </Column>\n            <Column size={6}>\n              <Text typeface=\"h2\" as=\"h1\" bold>\n                {page.hero_title}\n              </Text>\n              <Gutter size={2} />\n              <HorizontalAlign align=\"flex-start\">\n                <Button\n                  colorTheme=\"orange\"\n                  label={page.hero_button_label}\n                  onClick={scrollToForm}\n                  href=\"#form\"\n                />\n              </HorizontalAlign>\n            </Column>\n          </Grid>\n          <Gutter size={3} />\n        </PageMaxWidth>\n      </Section>\n\n      <CurvedSectionDivider\n        position=\"top\"\n        frontColor=\"newDark2\"\n        backColor=\"transparent\"\n      />\n      <Section background=\"dark\" tint=\"light\">\n        <PageMaxWidth>\n          <Gutter />\n          <MaxWidth width={700}>\n            <HorizontalAlign align=\"center\">\n              <Text color=\"light1\" bold typeface=\"h3\" as=\"h2\" align=\"center\">\n                {page.transform_heading}\n              </Text>\n            </HorizontalAlign>\n            <Gutter />\n          </MaxWidth>\n          <Gutter size={1.5} />\n          <Grid justifyColumns=\"center\">\n            {page.transform_points?.map((point, i) => (\n              <Column size={(12 / (page.transform_points?.length ?? 3)) as any}>\n                <StyledTransformPoint\n                  $last={i === (page.transform_points?.length || 0) - 1}\n                >\n                  <Text\n                    typeface=\"h5\"\n                    bold\n                    as=\"p\"\n                    color={\n                      [\"yellow1\", \"lightBlue1\", \"green2\"][\n                        i % 3\n                      ] as keyof typeof Color\n                    }\n                  >\n                    {point?.transform_point_text}\n                  </Text>\n                  <Gutter md={0.5} />\n                  <img src={point?.transform_point_svg?.url} alt=\"\" />\n                </StyledTransformPoint>\n              </Column>\n            ))}\n          </Grid>\n          <Gutter />\n        </PageMaxWidth>\n      </Section>\n      <CurvedSectionDivider\n        position=\"bottom\"\n        frontColor=\"newDark2\"\n        backColor=\"transparent\"\n      />\n\n      {page.benefits && (\n        <Section>\n          <PageMaxWidth>\n            <Gutter size={4} />\n            <Text as=\"h2\" typeface=\"h3\" bold align=\"center\">\n              {page.benefits_heading}\n            </Text>\n            <Gutter size={2.5} />\n\n            <Grid>\n              {page.benefits.map((benefit) => (\n                <Column size={4}>\n                  <StyledBenefit>\n                    <Text>{benefit?.benefit_text}</Text>\n                    <div className=\"area-bottom\">\n                      <img src={benefit?.benefit_svg?.url} alt=\"\" />\n                    </div>\n                  </StyledBenefit>\n                  <Gutter />\n                </Column>\n              ))}\n            </Grid>\n          </PageMaxWidth>\n        </Section>\n      )}\n\n      <Section>\n        <PageMaxWidth>\n          <Gutter size={4} md={2} />\n          <Grid alignColumns=\"center\">\n            <Column size={2} />\n            <Column size={5}>\n              <Visibility hideAbove=\"md\">\n                <Text as=\"p\" typeface=\"h3\" align=\"center\">\n                  {page.prompt_text}\n                </Text>\n              </Visibility>\n              <Visibility hideBelow=\"md\">\n                <Text typeface=\"h3\">{page.prompt_text}</Text>\n              </Visibility>\n            </Column>\n            <Column size={3}>\n              <HorizontalAlign md=\"center\" align=\"flex-end\">\n                <Button\n                  colorTheme=\"orange\"\n                  label={page.prompt_button_label}\n                  onClick={scrollToForm}\n                  href=\"#form\"\n                />\n              </HorizontalAlign>\n            </Column>\n            <Column size={2} />\n          </Grid>\n          <Gutter size={4} md={2} />\n        </PageMaxWidth>\n      </Section>\n\n      <CurvedSectionDividerGlow\n        position=\"top\"\n        glowColor=\"orange\"\n        backColor=\"light1\"\n      />\n      <Section background=\"dark\" tint=\"light\">\n        <PageMaxWidth>\n          {page.features && (\n            <Grid>\n              <Column size={3}>\n                <HorizontalAlign align=\"flex-start\" md=\"center\">\n                  <Gutter />\n                  <Text typeface=\"h3\" color=\"light1\" bold as=\"h3\">\n                    {page.features_heading}\n                  </Text>\n                </HorizontalAlign>\n              </Column>\n              <Column size={5}>\n                <Gutter />\n                {page.features\n                  .slice(0, Math.ceil(page.features.length / 2))\n                  .map(\n                    (f) =>\n                      f && (\n                        <BulletTick key={f.feature_text}>\n                          <Text color=\"light1\">{f.feature_text}</Text>\n                        </BulletTick>\n                      )\n                  )}\n              </Column>\n              <Column size={4}>\n                <Gutter />\n                {page.features.slice(Math.ceil(page.features.length / 2)).map(\n                  (f) =>\n                    f && (\n                      <BulletTick key={f.feature_text}>\n                        <Text color=\"light1\">{f.feature_text}</Text>\n                      </BulletTick>\n                    )\n                )}\n              </Column>\n            </Grid>\n          )}\n          <div id=\"form\" />\n          <Gutter size={4} />\n          <StyledFormWrap>\n            <MaxWidth width={560}>\n              <Text as=\"h2\" bold align=\"center\" color=\"dark4\">\n                {page.form_heading}\n              </Text>\n              <iframe\n                src=\"https://forms.wisetechglobal.com/shipamax/en-us/contact\"\n                width=\"100%\"\n                height=\"850\"\n                frameBorder=\"0\"\n                allowTransparency={true}\n                style={{ border: 0, margin: 0 }}\n              />\n            </MaxWidth>\n          </StyledFormWrap>\n          <Gutter size={2} />\n        </PageMaxWidth>\n      </Section>\n    </Layout>\n  );\n}\n\nconst StyledTransformPoint = styled(\"div\")<{ $last: boolean }>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n\n  ${(p) =>\n    !p.$last &&\n    `\n    &::after {\n      content: '';\n      width: 1px;\n      height: 130px;\n      background-color: #7c7c7c;\n      position: absolute;\n      top: 64px;\n      right: -${Dimen.gutterWidth / 2}px; \n    }\n  `}\n\n  img {\n    width: 158px;\n  }\n\n  @media (max-width: ${Dimen.breakpointDownMd}px) {\n    flex-direction: row-reverse;\n    max-width: 202px;\n    margin: 0 auto;\n    padding-bottom: ${Dimen.gutterWidth}px;\n\n    p {\n      flex: 1;\n    }\n\n    img {\n      width: 84px;\n    }\n\n    &::after {\n      top: auto;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: auto;\n      height: 1px;\n    }\n  }\n`;\n\nconst StyledBenefit = styled.div`\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 134px;\n  background-color: ${Color.light1};\n  border-radius: 8px;\n  box-shadow: 0px 8px 30px rgba(82, 87, 102, 0.15);\n  padding: 17px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  .area-bottom {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-top: 10px;\n\n    > img {\n      width: 20px;\n    }\n  }\n`;\n\nconst StyledFormWrap = styled.div`\n  background-color: ${Color.light1};\n  border-radius: 8px;\n  padding: 30px 20px 10px;\n  margin: 0 auto;\n  max-width: 720px;\n`;\n"],"sourceRoot":""}