{"version":3,"sources":["webpack:///./src/pages/docrouter.tsx"],"names":["DocRouterPage","page","data","prismicDocrouterPage","Error","scrollToForm","ev","document","getElementById","scrollIntoView","behavior","block","preventDefault","footerBackColor","Color","newDark2","size","alignColumns","reverseColumns","width","src","hero_main_svg","url","alt","typeface","as","bold","hero_title","align","colorTheme","label","hero_button_label","onClick","href","position","frontColor","backColor","background","tint","color","transform_heading","justifyColumns","transform_points","map","point","i","length","StyledTransformPoint","$last","transform_point_text","md","transform_point_svg","benefits","benefits_heading","benefit","StyledBenefit","benefit_text","className","benefit_svg","hideAbove","prompt_text","hideBelow","prompt_button_label","glowColor","features","features_heading","slice","Math","ceil","f","key","feature_text","id","StyledFormWrap","form_heading","height","frameBorder","allowTransparency","style","border","margin","styled","p","Dimen","gutterWidth","breakpointDownMd","div","light1"],"mappings":"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","file":"component---src-pages-docrouter-tsx-5ca25ec235732521b99f.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://go.shipamax.com/l/952713/2022-05-31/2pv5p\"\n                width=\"100%\"\n                height=\"800\"\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":""}