{"version":3,"sources":["webpack:///./src/components/ImageContainer.tsx","webpack:///./src/components/index/instruction.tsx","webpack:///./src/components/get-started/instructionSections.tsx","webpack:///./src/proPages/connectivity-hub.tsx","webpack:///./src/components/FeatureSection.tsx","webpack:///./src/components/ContentBlock.tsx"],"names":["StyledImage","styled","Img","props","isBgImg","ImageMobile","bp","mobileMax","ImageTablet","tabletMin","tabletMax","ImageDesktop","desktopMin","ImageSet","data","mobileFluid","tabletFluid","desktopFluid","fluid","StyledSingleColumnContainer","SingleColumnContainer","Container","div","BgImagContainer","limitHeight","FloatImgContainer","ImageContainer","mobileBackgroundImage","tabletBackgroundImage","desktopBackgroundImage","mobileFloatingImage","tabletFloatingImage","desktopFloatingImage","borderRadius","showOnlyBgImage","leftSpanDesk","rightSpanDesk","leftSpanTab","rightSpanTab","breakpoints","Instruction","children","heading","noNumber","networkPage","className","clsx","network","level","size","content","MainContainer","colors","tealLight","StepImg","RoundedContainer","Section","dark","gray5","Button","GridRoot","white","SizedColumn","GooglePlayButton","AppStoreButton","hr","Paragraph","gray60","Small","gray","teal","StyledStepImg","ConnectivityHubPage","page","components","sections","map","section","index","internal","type","heroImage","fullWidth","ignorePadding","heightMobile","simpleHero","key","paragraph","isLarge","features","heightTablet","instructionSection","description","isSemiLarge","image","file","url","src","contentBlock","proVersion","buttonsGroup","backgroundImageDesktop","backgroundImageTablet","backgroundImageMobile","contentTheme","contentPositionMobile","contentPositionDesktop","showAllButtonsDesktop","showAllButtonsMobile","enableBackgroundColor","contentBackground","mainHeroBlock","contentAlignCenterMobile","length","title","metadata","pageQuery","FeatureContainer","StyledParagraph","FeatureSection","feature","featureIndex","alignLeft","ContentDescription","Column","SingleButton","ButtonsList","ContentContainerInner","bgStyles","css","lightContentStyles","onlyShowFirstButtonStyle","multipleButtonsStyleMobile","multipleButtonsStyleDesktop","contentLeftDesktop","contentRightDesktop","contentAlignCenterMobileStyles","ContentContainer","wideContentColumn","ImageBackgroundColumn","ContentBlockContainer","extraMarginTop","ContentBlock","ignoreMarginBottom","pro","cta","onClick","navigate","data-gtm-cta","gtm"],"mappings":"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","file":"component---src-pro-pages-connectivity-hub-tsx-960b949f794bb684f025.js","sourcesContent":["import React, { useState, useEffect } from \"react\"\nimport styled from \"styled-components\"\nimport { ContentfulAsset, ContentfulFluid } from \"../../types/graphql-types\"\nimport Img, { FluidObject } from \"gatsby-image\"\nimport colors from \"../utils/colors\"\nimport { breakpoints as bp, SingleColumnContainer, Column } from \"../components/layout\"\n\ninterface StylingProps {\n  isBgImg?: boolean\n}\n\ninterface ImageSetProps extends StylingProps {\n  mobileFluid: ContentfulFluid\n  tabletFluid?: ContentfulFluid\n  desktopFluid: ContentfulFluid\n}\n\nconst StyledImage = styled(Img)<StylingProps>`\n  ${props => (props.isBgImg ? `border_radius: unset;` : `border-radius: 16px;`)}\n  min-height: inherit;\n  max-height: inherit;\n`\n\nconst ImageMobile = styled(StyledImage)`\n  width: 100%;\n  display: none;\n  @media (max-width: ${bp.mobileMax}) {\n    display: block;\n    border: none;\n  }\n`\n\nconst ImageTablet = styled(StyledImage)`\n  width: 100%;\n  display: none;\n  @media (min-width: ${bp.tabletMin}) and (max-width: ${bp.tabletMax}) {\n    display: block;\n  }\n`\n\nconst ImageDesktop = styled(StyledImage)`\n  width: 100%;\n  display: none;\n  @media (min-width: ${bp.desktopMin}) {\n    display: block;\n  }\n`\n\nconst ImageSet = (data: ImageSetProps) => {\n  const { mobileFluid, tabletFluid, desktopFluid, isBgImg } = data\n  return (\n    <>\n      <ImageMobile isBgImg={isBgImg} fluid={mobileFluid as FluidObject} />\n      {tabletFluid && <ImageTablet isBgImg={isBgImg} fluid={tabletFluid as FluidObject} />}\n      <ImageDesktop isBgImg={isBgImg} fluid={desktopFluid as FluidObject} />\n    </>\n  )\n}\n\ninterface ImageContainerProps {\n  mobileBackgroundImage?: ContentfulAsset\n  tabletBackgroundImage?: ContentfulAsset\n  desktopBackgroundImage?: ContentfulAsset\n  mobileFloatingImage?: ContentfulAsset\n  tabletFloatingImage?: ContentfulAsset\n  desktopFloatingImage?: ContentfulAsset\n  borderRadius?: boolean\n  showOnlyBgImage?: boolean\n}\n\nconst StyledSingleColumnContainer = styled(SingleColumnContainer)`\n  padding: 0 !important;\n`\nconst Container = styled.div`\n  position: relative;\n  min-height: inherit;\n  max-height: inherit;\n`\n\ninterface BgImageContainerProps {\n  limitHeight: boolean\n}\n\nconst BgImagContainer = styled.div<BgImageContainerProps>`\n  position: relative;\n\n  ${props => props.limitHeight && \"max-height: 70vh;\"}\n\n  img {\n    position: relative;\n  }\n`\nconst FloatImgContainer = styled(StyledSingleColumnContainer)`\n  overflow: hidden;\n  position: absolute;\n  top: 10%;\n  left: 10%;\n  height: 100%;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  @media (min-width: ${bp.tabletMin}) {\n    top: 56%;\n  }\n  @media (max-width: ${bp.mobileMax}) {\n    height: 80%;\n    width: 80%;\n  }\n`\n\nconst ImageContainer = (data: ImageContainerProps) => {\n  const {\n    mobileBackgroundImage,\n    tabletBackgroundImage,\n    desktopBackgroundImage,\n    mobileFloatingImage,\n    tabletFloatingImage,\n    desktopFloatingImage,\n    borderRadius = false,\n    showOnlyBgImage = false,\n  } = data\n\n  return (\n    <Container>\n      {mobileBackgroundImage && desktopBackgroundImage ? (\n        <>\n          <BgImagContainer limitHeight={showOnlyBgImage}>\n            <ImageSet\n              isBgImg={borderRadius}\n              mobileFluid={mobileBackgroundImage.fluid!}\n              tabletFluid={tabletBackgroundImage?.fluid!}\n              desktopFluid={desktopBackgroundImage.fluid!}\n            />\n          </BgImagContainer>\n\n          {mobileFloatingImage && desktopFloatingImage && (\n            <FloatImgContainer>\n              <Column leftSpanDesk={1} rightSpanDesk={1} leftSpanTab={1} rightSpanTab={1}>\n                <ImageSet\n                  mobileFluid={mobileFloatingImage.fluid!}\n                  tabletFluid={tabletFloatingImage?.fluid!}\n                  desktopFluid={desktopFloatingImage.fluid!}\n                />\n              </Column>\n            </FloatImgContainer>\n          )}\n        </>\n      ) : (\n        <ImageSet\n          isBgImg={borderRadius}\n          mobileFluid={mobileFloatingImage.fluid!}\n          tabletFluid={tabletFloatingImage?.fluid!}\n          desktopFluid={desktopFloatingImage?.fluid!}\n        />\n      )}\n    </Container>\n  )\n}\n\nexport default ImageContainer\n","import React, { ReactNode } from \"react\"\nimport styled from \"styled-components\"\nimport clsx from \"clsx\"\n\nimport Heading from \"../../components/heading\"\nimport { breakpoints } from \"../layout\"\n\ninterface Props {\n  children?: ReactNode\n  noNumber?: boolean\n  heading: string\n  networkPage?: boolean\n}\n\nconst Container = styled.div`\n  padding: 0 0 24px 0;\n  text-align: left;\n\n  h3 {\n    font-size: 1.5rem;\n    margin-bottom: 0;\n    margin-top: 0.5em;\n\n    em {\n      font-weight: inherit;\n    }\n  }\n  h4 {\n    font-size: 1.125rem;\n    font-weight: bold;\n    letter-spacing: 0.4px;\n    line-height: 1.35rem;\n  }\n  width: 100%;\n  @media (min-width: ${breakpoints.tabletMin}) {\n    padding: 92px 0 24px 0;\n    width: 50%;\n  }\n  @media (min-width: ${breakpoints.desktopMin}) {\n    padding: 124px 48px 24px 0px;\n    width: calc(50% - 72px);\n  }\n\n  &.noNumber {\n    @media (min-width: ${breakpoints.desktopMin}) {\n      padding: 48px 48px 24px 0px;\n    }\n  }\n\n  &.network {\n    @media (max-width: ${breakpoints.tabletMax}) {\n      width: 100%;\n    }\n\n    @media (min-width: ${breakpoints.desktopMin}) {\n      padding: 48px 48px 24px 48px;\n    }\n  }\n`\n\nconst Instruction = ({ children, heading, noNumber, networkPage }: Props) => (\n  <Container className={clsx({ noNumber, network: networkPage })}>\n    <Heading level=\"h2\" size=\"h4\" content={heading} />\n    {children}\n  </Container>\n)\n\nexport default Instruction\n","import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { navigate } from \"gatsby\"\n\nimport {\n  ContentfulHeading,\n  ContentfulInstructionSection,\n  ContentfulParagraph,\n  ContentfulSelectOption,\n} from \"../../../types/graphql-types\"\nimport {\n  Column,\n  Section,\n  breakpoints as bp,\n  nav,\n  GridRoot,\n  breakpoints,\n  SingleColumnContainer,\n  SizedColumn,\n} from \"../layout\"\nimport Instruction from \"../index/instruction\"\nimport Button from \"../forms/button\"\nimport colors from \"../../utils/colors\"\nimport Paragraph from \"../paragraph\"\nimport GooglePlayButton from \"../forms/googlePlayButton\"\nimport { Small } from \"../globalStyle\"\nimport AppStoreButton from \"../forms/appStoreButton\"\n\ninterface Props {\n  heading?: ContentfulHeading | null\n  description?: ContentfulParagraph | null\n  options?: ContentfulSelectOption[] | null\n  instructionSections: {\n    [key: string]: ContentfulInstructionSection[]\n  }\n}\n\nexport const MainContainer = styled.div`\n  background: ${colors.tealLight};\n  border-top-left-radius: 50px;\n  border-top-right-radius: 50px;\n  @media (min-width: ${bp.tabletMin}) {\n    border-top-left-radius: 75px;\n    border-top-right-radius: 75px;\n  }\n  @media (min-width: ${bp.desktopMin}) {\n    border-top-left-radius: 100px;\n    border-top-right-radius: 100px;\n  }\n`\n\nexport const StepImg = styled.div`\n  width: 100%;\n  width: calc(100% + 48px);\n  margin: 0 -24px;\n  order: -1;\n  @media (min-width: ${breakpoints.tabletMin}) {\n    margin-left: 0;\n    margin-right: -48px;\n    width: 50%;\n    order: unset;\n  }\n`\n\nconst Header = styled(Section)`\n  color: ${colors.dark};\n\n  padding-top: 1.5rem;\n  @media (min-width: ${bp.tabletMin}) {\n    padding-top: 2rem;\n  }\n  @media (min-width: ${bp.tabletMin}) {\n    padding-top: 3rem;\n  }\n`\n\nconst OptionsContainer = styled.div`\n  border-radius: 84px;\n  border: 1px solid ${colors.gray5};\n  display: flex;\n  flex-flow: row;\n  flex-direction: row;\n  margin: 0 auto;\n  padding: 0.5rem;\n`\n\nconst OptionsButton = styled(Button)`\n  border-radius: 84px;\n  padding: 10px 20px;\n  &:not(:first-child) {\n    margin-left: 0.5rem;\n  }\n`\n\nexport const RoundedContainer = styled(GridRoot)`\n  position: relative;\n  width: 100%;\n  background: ${colors.white};\n  border-radius: 1rem;\n  margin: 0 0 2rem 0;\n  overflow: hidden;\n  padding-bottom: 15px;\n  @media (min-width: ${bp.tabletMin}) {\n    margin: 0 0 2rem 0;\n    padding-bottom: 50px;\n  }\n  @media (min-width: ${bp.desktopMin}) {\n    margin: 0 8.333333% 2rem 8.333333%;\n  }\n\n  overflow: hidden;\n`\n\nconst SubInstructionsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  width: calc(100% + 48px);\n  padding-bottom: 1rem;\n  justify-content: space-between;\n  p {\n    line-height: 1.875rem;\n  }\n  flex-wrap: wrap;\n`\n\nconst SubInstruction = styled(SizedColumn)`\n  text-align: left;\n  padding-bottom: 1.5rem;\n`\n\nconst StyledButton = styled(Button)`\n  font-size: 1rem;\n  height: 48px;\n  padding: 4px 20px;\n  margin: 0;\n`\n\nconst StyledGooglePlayButton = styled(GooglePlayButton)`\n  font-size: 1rem;\n  height: 48px;\n  padding: 4px 20px;\n  margin: 1rem 0;\n`\n\nconst StyledAppStoreButton = styled(AppStoreButton)`\n  font-size: 1rem;\n  height: 48px;\n  padding: 4px 20px;\n  margin: 1rem 0;\n`\n\nconst Hr = styled.hr`\n  border: none;\n  border-top: 2px solid ${colors.gray5};\n  margin: 24px -48px;\n  width: calc(100% + 96px);\n`\n\nconst Disclaimer = styled(Paragraph)`\n  color: ${colors.gray60};\n  margin-bottom: 10px;\n  text-align: left;\n  p {\n    margin-top: 0;\n    ${Small}\n  }\n`\n\nconst InstructionNumber = styled.div`\n  border-radius: 28px;\n  font-size: 1.75rem;\n  font-weight: bold;\n  text-align: center;\n\n  border: 2px solid ${colors.gray};\n  position: absolute;\n  line-height: 40px;\n  width: 40px;\n  height: 40px;\n  color: ${colors.white};\n  top: 1.625rem;\n  left: 1.625rem;\n  background-color: ${colors.dark};\n\n  @media (min-width: ${breakpoints.tabletMin}) {\n    width: 56px;\n    height: 56px;\n    line-height: 56px;\n    top: 48px;\n    left: 48px;\n    background-color: unset;\n    color: ${colors.teal};\n  }\n\n  @media (min-width: ${breakpoints.desktopMin}) {\n    top: 80px;\n  }\n`\n\nconst InstructionSections = ({ heading, description, options, instructionSections }: Props) => {\n  const [instructionSection, setInstructionSections] = useState(\"androidInstructions\")\n  return (\n    <MainContainer>\n      <Header>\n        <SingleColumnContainer>\n          {heading?.heading && (\n            <Column leftSpanDesk={2} rightSpanDesk={2} center>\n              <p className=\"h2\">{heading.heading}</p>\n            </Column>\n          )}\n          {description?.paragraph && (\n            <Column leftSpanDesk={3} rightSpanDesk={3} center>\n              {description?.paragraph?.childMarkdownRemark?.html && (\n                <Paragraph isLarge content={description} />\n              )}\n            </Column>\n          )}\n\n          {options && (\n            <Column leftSpanDesk={3} rightSpanDesk={3} center>\n              <OptionsContainer>\n                {options.map((option, key) => (\n                  <React.Fragment key={key}>\n                    <OptionsButton\n                      transparent={instructionSection !== option?.value}\n                      inverted={instructionSection !== option?.value}\n                      data-gtm-cta={\"android-instructions\"}\n                      onClick={() => {\n                        setInstructionSections(option?.value!)\n                      }}\n                    >\n                      {option?.label}\n                    </OptionsButton>\n                  </React.Fragment>\n                ))}\n              </OptionsContainer>\n            </Column>\n          )}\n        </SingleColumnContainer>\n      </Header>\n      {instructionSections &&\n        instructionSections[instructionSection] &&\n        instructionSections[instructionSection].map((item, index) => {\n          return (\n            <GridRoot key={index}>\n              <RoundedContainer>\n                <InstructionNumber>{index + 1}</InstructionNumber>\n                <Instruction heading={item.heading?.heading!}>\n                  <>\n                    {item.description?.paragraph && (\n                      <Paragraph isSemiLarge content={item.description} />\n                    )}\n                    {item.link && !item.link.preset && (\n                      <Button\n                        type=\"button\"\n                        transparent\n                        onClick={() => navigate(item.link?.url!)}\n                        data-gtm-cta={item.link?.gtm!}\n                      >\n                        {item.link.heading}\n                      </Button>\n                    )}\n                    {item?.link?.preset === \"google-play\" && (\n                      <StyledGooglePlayButton\n                        transparent\n                        onClick={() => (window.location.href = item.link?.url!)}\n                        data-gtm-cta={item.link?.gtm!}\n                      >\n                        {item.link.heading}\n                      </StyledGooglePlayButton>\n                    )}\n                    {item?.link?.preset === \"app-store\" && (\n                      <StyledAppStoreButton\n                        transparent\n                        onClick={() => (window.location.href = item.link?.url!)}\n                        data-gtm-cta={item.link?.gtm!}\n                      >\n                        {item.link.heading}\n                      </StyledAppStoreButton>\n                    )}\n                  </>\n                </Instruction>\n                {item.image?.file?.url && <StepImg>{<img src={item.image.file.url} />}</StepImg>}\n                {item.subInstructions && (\n                  <>\n                    <Hr />\n                    <SubInstructionsContainer>\n                      {item.subInstructions.map((subInstruction, idx) => (\n                        <SubInstruction colSizeDesk={4} colSizeTab={6} key={index + \"-\" + idx}>\n                          {subInstruction?.image?.file?.url && (\n                            <img src={subInstruction?.image?.file?.url} />\n                          )}\n                          <h4>{subInstruction?.heading?.heading}</h4>\n                          {subInstruction?.description && (\n                            <Paragraph className=\"gray\" content={subInstruction.description} />\n                          )}\n                          {subInstruction?.link && subInstruction?.link?.preset === \"google-play\" && (\n                            <StyledGooglePlayButton\n                              transparent\n                              onClick={() => navigate(subInstruction.link?.url!)}\n                              data-gtm-cta={subInstruction.link?.gtm!}\n                            >\n                              {subInstruction.link.heading}\n                            </StyledGooglePlayButton>\n                          )}\n                          {subInstruction?.link && subInstruction?.link?.preset === \"app-store\" && (\n                            <StyledAppStoreButton\n                              transparent\n                              onClick={() => navigate(subInstruction.link?.url!)}\n                              data-gtm-cta={subInstruction.link?.gtm!}\n                            >\n                              {subInstruction.link.heading}\n                            </StyledAppStoreButton>\n                          )}\n                          {subInstruction?.link && !subInstruction?.link?.preset && (\n                            <StyledButton\n                              type=\"button\"\n                              transparent\n                              onClick={() => navigate(subInstruction.link?.url!)}\n                              data-gtm-cta={subInstruction.link?.gtm!}\n                            >\n                              {subInstruction?.link?.heading}\n                            </StyledButton>\n                          )}\n                        </SubInstruction>\n                      ))}\n                    </SubInstructionsContainer>\n                  </>\n                )}\n                {item.disclaimer?.paragraph?.childMarkdownRemark?.html && (\n                  <>\n                    <Hr />\n                    <Disclaimer content={item.disclaimer} />\n                  </>\n                )}\n              </RoundedContainer>\n            </GridRoot>\n          )\n        })}\n    </MainContainer>\n  )\n}\n\nexport default InstructionSections\n","import React, { Fragment } from \"react\"\nimport styled from \"styled-components\"\nimport { graphql } from \"gatsby\"\nimport {\n  ConnectivityHubQuery,\n  ContentfulImageSetElement,\n  ContentfulContentBlock,\n  ParagraphWithRemarkFragment,\n  ContentfulLink,\n  ContentfulSimpleHero,\n  ContentfulParagraph,\n  ContentfulFeature,\n  ContentfulFeatureSection,\n  ContentfulInstructionSection,\n} from \"../../types/graphql-types\"\nimport ProPage from \"../components/ProPage\"\nimport Heading from \"../components/heading\"\nimport Paragraph from \"../components/paragraph\"\nimport Instruction from \"../components/index/instruction\"\nimport ContentBlock from \"../components/ContentBlock\"\nimport { MainContainer, StepImg } from \"../components/get-started/instructionSections\"\nimport {\n  SingleColumnContainer,\n  Column,\n  SizedColumn,\n  Spacer,\n  GridRoot,\n  DualColumnContainer,\n  breakpoints as bp,\n} from \"../components/layout\"\nimport colors from \"../utils/colors\"\nimport ImageContainer from \"../components/ImageContainer\"\nimport FeatureSection from \"../components/FeatureSection\"\nimport { NavSpacer } from \"../components/page\"\n\ninterface Props {\n  data: ConnectivityHubQuery\n}\n\nexport const RoundedContainer = styled(GridRoot)`\n  position: relative;\n  width: 100%;\n  background: ${colors.white};\n  border-radius: 1rem;\n  margin: 0 0 2rem 0;\n  overflow: hidden;\n  padding-bottom: 15px;\n  flex-direction: column;\n\n  @media (min-width: ${bp.tabletMin}) {\n    margin: 5rem 0;\n    padding-bottom: 50px;\n    flex-direction: row;\n  }\n  @media (min-width: ${bp.desktopMin}) {\n    margin: 5rem 8.333333%;\n  }\n`\n\nconst StyledStepImg = styled(StepImg)`\n  display: flex;\n\n  > img {\n    max-width: 100%;\n  }\n\n  @media (min-width: ${bp.tabletMin}) {\n    margin-right: unset;\n  }\n\n  @media (max-width: ${bp.mobileMax}) {\n    justify-content: center;\n  }\n`\n\nconst ConnectivityHubPage = ({ data }: Props) => {\n  const { page } = data\n  const components = page?.sections?.map((section, index) => {\n    switch (section?.internal?.type) {\n      case \"ContentfulImageSetElement\":\n        const heroImage = section as ContentfulImageSetElement\n        return heroImage?.mobileBackgroundImage && heroImage?.desktopBackgroundImage ? (\n          <>\n            <SingleColumnContainer fullWidth ignorePadding>\n              <SizedColumn>\n                <ImageContainer\n                  mobileBackgroundImage={heroImage.mobileBackgroundImage}\n                  desktopBackgroundImage={heroImage.desktopBackgroundImage}\n                  borderRadius\n                />\n              </SizedColumn>\n            </SingleColumnContainer>\n\n            <Spacer heightMobile={0.5} />\n          </>\n        ) : (\n          <></>\n        )\n      case \"ContentfulSimpleHero\":\n        const simpleHero = section as ContentfulSimpleHero\n        return (\n          <Fragment key={`simple-hero-${index}`}>\n            <SingleColumnContainer ignorePadding>\n              <Column leftSpanDesk={2} rightSpanDesk={2} leftSpanTab={1} rightSpanTab={1}>\n                {simpleHero.heading?.heading && (\n                  <Heading level=\"h1\" size=\"h1\" content={simpleHero.heading.heading} />\n                )}\n              </Column>\n            </SingleColumnContainer>\n          </Fragment>\n        )\n      case \"ContentfulParagraph\":\n        const paragraph = section as ContentfulParagraph\n        return (\n          <Fragment key={`contentful-paragraph-${index}`}>\n            <SingleColumnContainer ignorePadding>\n              <Column leftSpanDesk={2} rightSpanDesk={2} leftSpanTab={1} rightSpanTab={1}>\n                <Paragraph className=\"gray\" isLarge content={paragraph} />\n              </Column>\n            </SingleColumnContainer>\n\n            <Spacer heightMobile={0.5} />\n          </Fragment>\n        )\n      case \"ContentfulFeatureSection\":\n        return (\n          <SingleColumnContainer key={`contentful-feature-section-${index}`}>\n            <Column leftSpanDesk={1} rightSpanDesk={1}>\n              <DualColumnContainer ignorePadding>\n                <FeatureSection\n                  features={(section as ContentfulFeatureSection).features as ContentfulFeature[]}\n                />\n              </DualColumnContainer>\n            </Column>\n            <Spacer heightMobile={0.5} heightTablet={0.5} />\n          </SingleColumnContainer>\n        )\n      case \"ContentfulInstructionSection\":\n        const instructionSection = section as ContentfulInstructionSection\n\n        return (\n          <Fragment key={`single-column-container-${index}`}>\n            <MainContainer>\n              <GridRoot>\n                <RoundedContainer>\n                  <Instruction heading={instructionSection.heading?.heading!}>\n                    <>\n                      {instructionSection.description?.paragraph && (\n                        <Paragraph isSemiLarge content={instructionSection.description} />\n                      )}\n                    </>\n                  </Instruction>\n                  {instructionSection.image?.file?.url && (\n                    <StyledStepImg>{<img src={instructionSection.image.file.url} />}</StyledStepImg>\n                  )}\n                </RoundedContainer>\n              </GridRoot>\n            </MainContainer>\n            <Spacer heightMobile={0.5} />\n          </Fragment>\n        )\n      case \"ContentfulContentBlock\":\n        const contentBlock = section as ContentfulContentBlock\n        return (\n          <Fragment key={`contenful-content-block-${index}`}>\n            <ContentBlock\n              proVersion\n              heading={contentBlock.heading?.heading!}\n              description={contentBlock.description as ParagraphWithRemarkFragment}\n              buttonsGroup={contentBlock.buttonsGroup as ContentfulLink[]}\n              backgroundImageDesktop={contentBlock.backgroundImageDesktop!}\n              backgroundImageTablet={contentBlock.backgroundImageTablet!}\n              backgroundImageMobile={contentBlock.backgroundImageMobile!}\n              contentTheme={contentBlock.contentTheme!}\n              contentPositionMobile={contentBlock.contentPositionMobile!}\n              contentPositionDesktop={contentBlock.contentPositionDesktop!}\n              showAllButtonsDesktop={contentBlock.showAllButtonsDesktop!}\n              showAllButtonsMobile={contentBlock.showAllButtonsMobile!}\n              enableBackgroundColor={contentBlock.enableBackgroundColor!}\n              contentBackground={contentBlock.contentBackground ?? \"white\"}\n              mainHeroBlock={contentBlock.mainHeroBlock!}\n              contentAlignCenterMobile={contentBlock.contentAlignCenterMobile ?? false}\n            />\n            {page?.sections && index !== page.sections.length - 1 && <Spacer heightMobile={0.5} />}\n          </Fragment>\n        )\n      default:\n        return null\n    }\n  })\n\n  return (\n    <ProPage title=\"Connectivity Hub\" metadata={page?.metadata}>\n      <NavSpacer />\n      <>{components}</>\n    </ProPage>\n  )\n}\n\nexport default ConnectivityHubPage\n\nexport const pageQuery = graphql`\n  query ConnectivityHub($locale: String = \"en\") {\n    page: contentfulPage(\n      label: { eq: \"HMD ConnectPro - Connectivity Hub\" }\n      node_locale: { eq: $locale }\n    ) {\n      metadata {\n        ...Metadata\n      }\n      sections {\n        ... on ContentfulImageSetElement {\n          internal {\n            type\n          }\n          mobileBackgroundImage {\n            fluid(maxWidth: 767, quality: 90) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          desktopBackgroundImage {\n            fluid(maxWidth: 2000, quality: 90) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n        }\n        ... on ContentfulSimpleHero {\n          internal {\n            type\n          }\n          heading {\n            heading\n          }\n        }\n        ... on ContentfulParagraph {\n          ...ParagraphWithRemark\n          internal {\n            type\n          }\n        }\n        ... on ContentfulFeatureSection {\n          features {\n            heading {\n              heading\n            }\n            description {\n              ...ParagraphWithRemark\n            }\n          }\n          internal {\n            type\n          }\n        }\n        ... on ContentfulInstructionSection {\n          internal {\n            type\n          }\n          heading {\n            heading\n          }\n          description {\n            ...ParagraphWithRemark\n          }\n          image {\n            file {\n              url\n            }\n          }\n        }\n        ... on ContentfulContentBlock {\n          internal {\n            type\n          }\n          heading {\n            heading\n          }\n          description {\n            ...ParagraphWithRemark\n          }\n          buttonsGroup {\n            ...Link\n          }\n          backgroundImageMobile {\n            fluid(maxWidth: 767, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          backgroundImageTablet {\n            fluid(maxWidth: 991, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          backgroundImageDesktop {\n            fluid(maxWidth: 2000, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          contentTheme\n          contentPositionMobile\n          contentPositionDesktop\n          showAllButtonsDesktop\n          showAllButtonsMobile\n          enableBackgroundColor\n          contentAlignCenterMobile\n          contentBackground\n          mainHeroBlock\n        }\n      }\n    }\n  }\n`\n","import React from \"react\"\nimport styled from \"styled-components\"\n\nimport { ContentfulFeature, ContentfulParagraph } from \"../../types/graphql-types\"\nimport colors from \"../utils/colors\"\nimport { breakpoints } from \"./layout\"\n\nimport { RoundedContainer } from \"./layout\"\nimport Heading from \"./heading\"\nimport Paragraph from \"./paragraph\"\n\nconst FeatureContainer = styled(RoundedContainer)`\n  background-color: ${colors.white};\n  margin-bottom: 2em;\n  border: 2px solid #ececec;\n  box-shadow: 0 2px 63px -36px rgba(0, 0, 0, 0.38);\n  padding: 48px;\n\n  @media (min-width: ${breakpoints.tabletMin}) {\n    margin-bottom: 0;\n    padding: 48px;\n  }\n`\n\nconst StyledParagraph = styled(Paragraph)`\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  h3,\n  h4,\n  h5 {\n    margin: 1.875rem 0px 0px 0px;\n\n    a {\n      color: ${colors.dark};\n    }\n  }\n  img {\n    width: 100%;\n  }\n\n  p {\n    margin-top: 0;\n  }\n`\n\ntype FeatureSectionProps = {\n  features: ContentfulFeature[]\n}\n\nconst FeatureSection: React.FC<FeatureSectionProps> = ({ features }) => {\n  return (\n    <>\n      {features.map(\n        (feature, featureIndex) =>\n          (feature?.heading || feature?.description) && (\n            <FeatureContainer key={`feature-container-${featureIndex}`} alignLeft>\n              {feature.heading && (\n                <Heading level=\"h4\" size=\"h4\" content={feature.heading?.heading} />\n              )}\n              {feature.description && (\n                <StyledParagraph isSemiLarge content={feature.description as ContentfulParagraph} />\n              )}\n            </FeatureContainer>\n          )\n      )}\n    </>\n  )\n}\n\nexport default FeatureSection\n","import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Large } from \"./globalStyle\"\nimport {\n  ContentfulParagraph,\n  ParagraphWithRemarkFragment,\n  ContentfulAsset,\n  ContentfulLink,\n} from \"../../types/graphql-types\"\nimport { SingleColumnContainer, Column, breakpoints as bp } from \"../components/layout\"\nimport Heading from \"./heading\"\nimport ImageContainer from \"./ImageContainer\"\nimport Paragraph from \"../components/paragraph\"\nimport Button from \"./forms/button\"\nimport { navigate } from \"gatsby\"\nimport colors from \"../utils/colors\"\n\ninterface ContentBlockProps {\n  heading?: ParagraphWithRemarkFragment | ContentfulParagraph | string\n  description?: ParagraphWithRemarkFragment | ContentfulParagraph\n  buttonsGroup?: Array<ContentfulLink>\n  backgroundImageMobile: ContentfulAsset\n  backgroundImageTablet: ContentfulAsset\n  backgroundImageDesktop: ContentfulAsset\n  proVersion?: boolean\n  contentTheme?: string\n  contentPositionMobile?: string\n  contentPositionDesktop?: string\n  showAllButtonsDesktop?: boolean\n  showAllButtonsMobile?: boolean\n  enableBackgroundColor?: boolean\n  extraMarginTop?: boolean\n  contentAlignCenterDesktop?: boolean\n  contentAlignCenterMobile?: boolean\n  contentBackground: string\n  mainHeroBlock: boolean\n  wideContentColumn?: boolean\n}\n\ninterface ContentStylingProps {\n  contentTheme: string\n  contentPositionMobile: string\n  contentPositionDesktop: string\n  showAllButtonsDesktop: boolean\n  showAllButtonsMobile: boolean\n  enableBackgroundColor: boolean\n  contentAlignCenterMobile: boolean\n  contentBackground: string\n  wideContentColumn: boolean\n}\n\nconst ContentDescription = styled(Column)``\n\nconst SingleButton = styled(Button)`\n  z-index: 1;\n  @media (min-width: ${bp.tabletMin}) {\n    margin-bottom: 1.83em;\n    width: 232px;\n  }\n  @media (max-width: ${bp.mobileMax}) {\n    width: 196px;\n    height: 56px;\n    padding: 0;\n  }\n`\n\nconst ButtonsList = styled.div`\n  display: flex;\n`\nconst ContentContainerInner = styled(Column)`\n  h1,\n  h2,\n  ${ContentDescription} {\n    width: calc(100% - 2 * 8.333%);\n  }\n  @media (max-width: ${bp.mobileMax}) {\n    h2 {\n      margin: 0;\n    }\n  }\n  @media (min-width: ${bp.tabletMin}) and (max-width: ${bp.tabletMax}) {\n    h2 {\n      margin-top: 0;\n      padding-top: 1rem;\n    }\n  }\n`\n\nconst bgStyles = css`\n  display: flex;\n  flex-direction: column;\n  height: auto;\n  justify-content: center;\n  min-height: 380px;\n\n  @media (min-width: ${bp.tabletMin}) {\n    min-height: 700px;\n  }\n`\n\nconst lightContentStyles = css`\n  h1,\n  h2,\n  p {\n    color: ${colors.white};\n  }\n`\n\nconst onlyShowFirstButtonStyle = css`\n  ${ButtonsList} {\n    ${SingleButton} {\n      display: none;\n      &:first-child {\n        display: block;\n      }\n    }\n  }\n`\n\nconst multipleButtonsStyleMobile = css`\n  ${ButtonsList} {\n    display: flex;\n    flex-direction: column;\n    ${SingleButton} {\n      margin-bottom: 1rem;\n      &:last-child {\n        margin-bottom: 0;\n      }\n    }\n  }\n`\n\nconst multipleButtonsStyleDesktop = css`\n  flex-direction: row;\n  justify-content: flex-start;\n  ${SingleButton} {\n    margin-right: 24px;\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n`\n\nconst contentLeftDesktop = css`\n  left: 0;\n  transform: translate(0, -50%);\n`\n\nconst contentRightDesktop = css`\n  transform: translate(100%, -50%);\n`\n\nconst contentAlignCenterMobileStyles = css`\n  text-align: center;\n  h1 {\n    margin: 2rem auto 10px auto;\n    font-size: 2rem;\n  }\n  ${ContentDescription} {\n    margin: 0 auto;\n    p {\n      font-size: 1rem;\n    }\n  }\n  ${ButtonsList} {\n    margin: 1rem auto 2rem auto;\n  }\n`\n\nconst ContentContainer = styled.div<ContentStylingProps>`\n  position: absolute;\n  margin-left: 1rem;\n  margin-right: 1rem;\n  width: calc(100% - 2rem);\n\n  ${ContentContainerInner} {\n    ${props => props.contentTheme === \"light\" && lightContentStyles}\n    ${props => (props.enableBackgroundColor ? bgStyles : \"\")}\n    border: 2px solid  ${props =>\n      props.enableBackgroundColor ? props.contentBackground : \"transparent\"};\n    background-color: ${props =>\n      props.enableBackgroundColor ? props.contentBackground : \"transparent\"};\n\n    ${props =>\n      props.contentPositionDesktop === \"left\" &&\n      `\n      @media (min-width: ${bp.tabletMin}) and (max-width: ${bp.tabletMax}) {\n        padding: 0 48px;\n      }\n    `}\n  }\n  \n  @media (max-width: ${bp.mobileMax}) {\n    height: 100%;\n    ${props =>\n      props.showAllButtonsMobile === true ? multipleButtonsStyleMobile : onlyShowFirstButtonStyle}\n    ${ContentContainerInner} {\n      ${props => props.contentPositionMobile === \"top\" && `margin: 2rem auto 0 auto;`}\n      ${props => props.contentPositionMobile === \"center\" && `margin: auto;`}\n      ${props => props.contentPositionMobile === \"bottom\" && `position: absolute; bottom: 0;`}\n      ${props => props.contentAlignCenterMobile && contentAlignCenterMobileStyles}\n      ${props =>\n        props.contentPositionMobile === \"bottom\" &&\n        props.enableBackgroundColor &&\n        `border-top-left-radius: 40px; border-top-right-radius: 40px;`}\n    }\n  }\n\n  @media (min-width: ${bp.tabletMin}) {\n    width: ${props => (props.wideContentColumn ? \"70%\" : \"calc(50% - (1.5 * 8.333%))\")};\n    margin: 0;\n    top: 50%;\n    \n    ${ContentContainerInner} {\n      ${props => props.contentPositionDesktop === \"left\" && contentLeftDesktop}\n      ${props => props.contentPositionDesktop === \"right\" && contentRightDesktop}\n      ${props =>\n        props.contentPositionDesktop === \"left\" &&\n        props.enableBackgroundColor &&\n        `border-top-right-radius: 40px; border-bottom-right-radius: 40px;`}\n        ${props =>\n          props.contentPositionDesktop === \"right\" &&\n          props.enableBackgroundColor &&\n          `border-top-left-radius: 40px; border-bottom-left-radius: 40px;`}\n    }\n    \n      ${props =>\n        props.showAllButtonsDesktop === true\n          ? multipleButtonsStyleDesktop\n          : onlyShowFirstButtonStyle}\n  }  \n`\n\nconst ImageBackgroundColumn = styled(Column)`\n  @media (min-width: ${bp.desktopMin}) {\n    max-height: 100vh;\n  }\n`\n\nconst ContentBlockContainer = styled.div<{ extraMarginTop: boolean; mainHeroBlock: boolean }>`\n  position: relative;\n  ${props => (props.extraMarginTop ? `margin-top: 96px;` : \"\")}\n  ${SingleColumnContainer} {\n    padding: 0;\n  }\n\n  ${ImageBackgroundColumn} {\n    @media (min-width: ${bp.desktopMin}) {\n      min-height: 500px;\n      max-height: ${props => (props.mainHeroBlock ? \"600px\" : \"500px\")};\n    }\n\n    @media (min-width: ${bp.tabletMin}) and (max-width: ${bp.tabletMax}) {\n      min-height: 490px;\n      max-height: ${props => (props.mainHeroBlock ? \"600px\" : \"490px\")};\n    }\n\n    @media (max-width: ${bp.mobileMax}) {\n      max-height: ${props => (props.mainHeroBlock ? \"680px;\" : \"565px\")};\n\n      img {\n        object-position: top !important;\n      }\n    }\n  }\n\n  ${ContentContainer} {\n    ${props =>\n      props.mainHeroBlock &&\n      `\n        @media (min-width: 400px) and (max-width: ${bp.mobileMax}) {\n          margin-left: 15%;\n          margin-right: 15%;\n          width: 70%;\n        }\n    `}\n  }\n\n  ${ContentDescription} {\n    ${props =>\n      props.mainHeroBlock\n        ? `\n        @media (max-width: ${bp.mobileMax}) {\n          p {\n            margin: 0;\n          }\n        }\n      `\n        : `\n      @media (max-width: ${bp.mobileMax}) {\n        p {\n          max-width: 320px;\n        }\n      }\n    `}\n  }\n`\n\nconst ContentBlock = ({\n  heading,\n  description,\n  buttonsGroup,\n  backgroundImageMobile,\n  backgroundImageTablet,\n  backgroundImageDesktop,\n  proVersion = false,\n  contentTheme = \"dark\",\n  contentPositionMobile = \"center\",\n  contentPositionDesktop = \"left\",\n  showAllButtonsDesktop = true,\n  showAllButtonsMobile = true,\n  enableBackgroundColor = false,\n  extraMarginTop = false,\n  contentAlignCenterMobile = false,\n  mainHeroBlock = false,\n  contentBackground,\n  wideContentColumn = false,\n}: ContentBlockProps) => {\n  return (\n    <ContentBlockContainer extraMarginTop={extraMarginTop} mainHeroBlock={mainHeroBlock}>\n      {backgroundImageDesktop && backgroundImageTablet && backgroundImageMobile && (\n        <SingleColumnContainer>\n          <ImageBackgroundColumn\n            leftSpanDesk={0}\n            rightSpanDesk={0}\n            leftSpanTab={0}\n            rightSpanTab={0}\n          >\n            <ImageContainer\n              borderRadius\n              mobileFloatingImage={backgroundImageMobile}\n              tabletFloatingImage={backgroundImageTablet}\n              desktopFloatingImage={backgroundImageDesktop}\n            />\n          </ImageBackgroundColumn>\n          <ContentContainer\n            contentTheme={contentTheme}\n            contentPositionDesktop={contentPositionDesktop}\n            contentPositionMobile={contentPositionMobile}\n            showAllButtonsMobile={showAllButtonsMobile}\n            showAllButtonsDesktop={showAllButtonsDesktop}\n            enableBackgroundColor={enableBackgroundColor}\n            contentAlignCenterMobile={contentAlignCenterMobile}\n            contentBackground={contentBackground!}\n            wideContentColumn={wideContentColumn}\n          >\n            <ContentContainerInner leftSpanTab={3} rightSpanTab={1} alignLeft>\n              {heading && (\n                <Heading\n                  level={mainHeroBlock ? \"h1\" : \"h2\"}\n                  size={mainHeroBlock ? \"h1\" : \"h2\"}\n                  ignoreMarginBottom\n                  pro={proVersion}\n                  content={heading}\n                />\n              )}\n              {description && (\n                <ContentDescription>\n                  <Paragraph\n                    isSemiLarge={mainHeroBlock}\n                    isLarge={!mainHeroBlock}\n                    content={description}\n                  />\n                </ContentDescription>\n              )}\n              <ButtonsList>\n                {buttonsGroup &&\n                  buttonsGroup.map((cta, index) => {\n                    return (\n                      <SingleButton\n                        key={index}\n                        type=\"button\"\n                        pro={proVersion}\n                        onClick={() => navigate(cta.url!)}\n                        data-gtm-cta={cta.gtm || \"\"}\n                      >\n                        {cta.heading}\n                      </SingleButton>\n                    )\n                  })}\n              </ButtonsList>\n            </ContentContainerInner>\n          </ContentContainer>\n        </SingleColumnContainer>\n      )}\n    </ContentBlockContainer>\n  )\n}\n\nexport default ContentBlock\n"],"sourceRoot":""}