{"version":3,"file":"component---src-pages-distribution-direct-marketing-js-e0fb1b646963ab89de8b.js","mappings":"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","sources":["webpack://streetlib-main-website/./src/components/utils.js","webpack://streetlib-main-website/./src/containers/StreetlibFeatures/FeaturesSection/features.style.js","webpack://streetlib-main-website/./src/containers/StreetlibFeatures/FeaturesSection/index.js","webpack://streetlib-main-website/./src/containers/StreetlibHome/ServicesSection/services.style.js","webpack://streetlib-main-website/./src/containers/StreetlibHome/ServicesSection/index.js","webpack://streetlib-main-website/./src/containers/Common/DescriptionSectionsTitle/descriptionSectionsTitle.style.js","webpack://streetlib-main-website/./src/containers/Common/DescriptionSectionsTitle/index.js","webpack://streetlib-main-website/./src/pages/distribution/direct-marketing.js"],"sourcesContent":["/**\n *\n * Example: if href is not empty wrap content with a link\n *\n <ConditionalWrap\n    condition={href}\n    wrapper={children => <a href={href}>{children}</a>}>\n    ...here the wrapped content...\n </ConditionalWrap>\n */\nexport const ConditionalWrap = ({condition, wrapper, children}) =>  condition ? wrapper(children) : children;\n\n","import styled from 'styled-components';\nimport { themeGet } from 'styled-system'\n\nconst FeatureSectionWrapper = styled.section`\n  //padding: 75px 0 75px; /* commented */\n  \n  &.bg-dark {\n      background-color: ${themeGet('colors.blue')};\n  }\n  \n  @media (max-width: 990px) {\n    //padding: 60px 0 0 0; /* commented */\n  }\n  a {\n      display:block;\n      border: 1px solid transparent;\n      &:hover {\n         background-color: #fdfdfd;\n         border-color: #eeeeee;\n         border-radius: 20px;\n      }\n  }\n\n  .feature__block {\n    position: relative;\n    height: 100%;\n    transition: box-shadow 0.3s ease;\n    display: flex;\n    @media (max-width: 1100px) {\n      flex-direction: column;\n      * {\n        text-align: center;\n        margin-left: auto;\n        margin-right: auto;\n      }\n    }\n    @media (max-width: 500px) {\n      padding: 30px 0;\n    }\n    .icon__wrapper {\n      position: relative;\n      /*border-bottom-right-radius: 6px;*/\n      flex-shrink: 0;\n      margin-right: 22px;\n      /*background: #fff5f6;*/\n      /*.flaticon-flask {\n        &:before {\n          margin-left: 8px;\n        }\n      }*/\n      @media (max-width: 1100px) {\n        text-align: center;\n        margin-left: auto;\n        margin-right: auto;\n      }\n    }\n  }\n\n  .row {\n    > .col {\n      .feature__block {\n        .icon__wrapper {\n          background: #148EA0;\n          color: #fff;\n        }\n      }/*\n      &:nth-child(-n + 3) {\n      }\n\n      &:nth-child(3n + 3),\n      &:last-child {\n      }\n      &:nth-child(1) {\n        .feature__block {\n          .icon__wrapper {\n            background: #fff5f6;\n            color: #f55767;\n          }\n        }\n      }\n\n      &:nth-child(2) {\n        .feature__block {\n          .icon__wrapper {\n            background: #ebfff2;\n            color: #29c05e;\n          }\n        }\n      }\n      &:nth-child(3) {\n        .feature__block {\n          .icon__wrapper {\n            background: #f1faff;\n            color: #2595d4;\n          }\n        }\n      }\n      &:nth-child(4) {\n        .feature__block {\n          .icon__wrapper {\n            background: #fffae8;\n            color: #e9b600;\n          }\n        }\n      }\n      &:nth-child(5) {\n        .feature__block {\n          .icon__wrapper {\n            background: #f5eeff;\n            color: #a55cef;\n          }\n        }\n      }\n      &:nth-child(6) {\n        .feature__block {\n          .icon__wrapper {\n            background: #ffecfa;\n            color: #e764a5;\n          }\n        }\n      }*/\n    }\n  }\n\n  .only-title {\n    h2, p {\n      margin-bottom: 0;\n    }\n    .icon__wrapper {\n      @media (min-width: 575px) {\n        margin-bottom: 0;\n      }\n    }\n    .feature__block {\n      align-items: center;\n      .content__wrapper {\n        display: flex;\n        align-items: center;\n      }\n    }\n  }\n  .title-sm {\n    .feature__block h2 {\n      font-size: 18px;\n    }\n  }\n  .has-coming-soon {\n    .row > div:last-child {\n      .icon__wrapper {\n        background-color: rgba(228, 228, 228, 0.49);\n        i {\n          color: #B9B9B9;\n        }\n      }\n      h2 {\n        opacity: 0.6;\n      }\n    }\n  }\n`;\n\nexport default FeatureSectionWrapper;\n","import React from 'react';\nimport { Link, useIntl } from 'gatsby-plugin-intl';\nimport PropTypes from 'prop-types';\nimport Box from '../../../components/reusecore/Box';\nimport Text from '../../../components/reusecore/Text';\nimport Heading from '../../../components/reusecore/Heading';\nimport FeatureBlock from '../../../components/common/FeatureBlock';\nimport Container from '../../../components/common/UI/Container';\nimport FeatureSectionWrapper from './features.style';\nimport { ConditionalWrap } from '../../../components/utils';\n\nconst FeaturesSection = ({\n  pretitle,\n  title,\n  data,\n  row,\n  col,\n  sectionHeader,\n  sectionTitle,\n  sectionSubTitle,\n  featureTitle,\n  featureDescription,\n  iconStyle,\n  contentStyle,\n  blockWrapperStyle,\n  background,\n  className\n}) => {\n  const intl = useIntl();\n  return (\n    <FeatureSectionWrapper className={background === 'dark' && 'bg-dark'}>\n      <Container className={className}>\n        <Box {...sectionHeader}>\n          <Text content={pretitle} {...sectionSubTitle} />\n          <Heading content={title} {...sectionTitle} />\n          {/*<Text content=\"OUR FEATURES\" {...sectionSubTitle} />*/}\n        </Box>\n        <Box className=\"row\" {...row}>\n          {data.map((feature, index) => (\n            <Box className=\"col\" {...col} key={index}>\n              <ConditionalWrap\n                condition={feature.link}\n                wrapper={children => <Link to={feature.link}>{children}</Link>}\n              >\n                <FeatureBlock\n                  icon={<i className={feature.icon} />}\n                  wrapperStyle={blockWrapperStyle}\n                  iconStyle={iconStyle}\n                  contentStyle={contentStyle}\n                  title={<Heading content={intl.formatMessage({ id: `${feature.idx}.title` })} {...featureTitle} />}\n                  description={\n                    <Text\n                      content={intl.formatMessage({ id: `${feature.idx}.description` })}\n                      {...featureDescription}\n                    />\n                  }\n                />\n              </ConditionalWrap>\n            </Box>\n          ))}\n        </Box>\n      </Container>\n    </FeatureSectionWrapper>\n  );\n};\n\nFeaturesSection.propTypes = {\n  sectionHeader: PropTypes.object,\n  row: PropTypes.object,\n  col: PropTypes.object,\n  sectionTitle: PropTypes.object,\n  sectionSubTitle: PropTypes.object,\n  featureTitle: PropTypes.object,\n  featureDescription: PropTypes.object\n};\n\nFeaturesSection.defaultProps = {\n  sectionHeader: {\n    mb: ['50px', '50px', '50px', '80px']\n  },\n\n  sectionSubTitle: {\n    as: 'span',\n    display: 'block',\n    textAlign: 'center',\n    fontSize: '18px',\n    letterSpacing: '0.15em',\n    fontWeight: '700',\n    color: 'primary',\n    mb: '20px',\n    mt: '10px'\n  },\n\n  sectionTitle: {\n    textAlign: 'center',\n    fontSize: ['26px', '28px', '32px', '36px', '40px'],\n    // fontWeight: '500',\n    // color: '#0f2137',\n    // letterSpacing: '-0.025em',\n    mb: '0'\n  },\n\n  row: {\n    flexBox: true,\n    flexWrap: 'wrap'\n  },\n\n  col: {\n    width: [1, 1, 1, 1 / 3]\n  },\n\n  blockWrapperStyle: {\n    p: ['30px', '20px', '20px', '20px']\n  },\n\n  iconStyle: {\n    width: ['70px', '60px', '60px', '84px'],\n    height: ['70px', '60px', '60px', '84px'],\n    borderRadius: '50%',\n    bg: '#93d26e',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: ['22px', '26px'],\n    color: '#ffffff',\n    overflow: 'hidden',\n    mb: '30px',\n    borderBottomLeftRadius: '50%'\n  },\n\n  contentStyle: {\n    textAlign: 'left',\n    mt: '-5px'\n  },\n\n  featureTitle: {\n    fontSize: ['18px', '20px'],\n    fontWeight: '400',\n    color: '#0f2137',\n    lineHeight: '1.5',\n    letterSpacing: '-0.020em',\n    mb: '10px'\n  },\n\n  featureDescription: {\n    fontSize: '15px',\n    lineHeight: '1.75',\n    color: '#343d4ccc'\n  }\n};\n\nexport default FeaturesSection;\n","import styled from 'styled-components';\n\nconst ServicesSectionWrapper = styled.section`\n  padding: 75px 0 75px;\n\n  @media (max-width: 480px) {\n    padding: 40px 0 40px;\n  }\n  \n  &.add-pb {\n    @media (min-width: 991px) {\n      padding-bottom: 100px;\n    }\n  }\n  /*@media (max-width: 990px) {\n    padding: 60px 0;\n  }*/\n\n  .feature__block {\n    position: relative;\n    height: 100%;\n    transition: box-shadow 0.3s ease;\n    display: flex;\n    @media (max-width: 500px) {\n      padding: 30px 0;\n    }\n    @media (max-width: 360px) {\n      padding: 15px 0;\n    }\n    .icon__wrapper {\n      position: relative;\n      /*border-bottom-right-radius: 6px;*/\n      flex-shrink: 0;\n      margin-right: 22px;\n      /*background: #fff5f6;*/\n      background-color: #138ea0;\n      color: #fff;\n      .flaticon-flask {\n        &:before {\n          margin-left: 8px;\n        }\n      }\n    }\n    &:hover {\n      ${'' /* box-shadow: 0 40px 90px -30px rgba(39, 79, 117, 0.2); */}\n    }\n  }\n\n  .row {\n    @media (min-width: 575px) {\n      margin-bottom: -30px; /* new */\n    }\n    @media (max-width: 574px) {\n      .feature__block {\n        text-align: center;\n        flex-direction: column;\n        .icon__wrapper {\n          margin-left: auto;\n          margin-right: auto;\n        }\n        .content__wrapper {\n          text-align: center;\n        }\n      }\n    }\n    > .col {\n      &:nth-child(-n + 3) {\n      }\n\n      &:nth-child(3n + 3),\n      &:last-child {\n      }\n      &:nth-child(1) {\n        .feature__block {\n          .icon__wrapper {\n            /*background: #fff5f6;\n            color: #f55767;*/\n          }\n        }\n      }\n\n      &:nth-child(2) {\n        .feature__block {\n          .icon__wrapper {\n            /*background: #ebfff2;\n            color: #29c05e;*/\n          }\n        }\n      }\n      &:nth-child(3) {\n        .feature__block {\n          .icon__wrapper {\n            /*background: #f1faff;\n            color: #2595d4;*/\n          }\n        }\n      }\n      &:nth-child(4) {\n        .feature__block {\n          .icon__wrapper {\n            /*background: #fffae8;\n            color: #e9b600;*/\n          }\n        }\n      }\n      &:nth-child(5) {\n        .feature__block {\n          .icon__wrapper {\n            /*background: #f5eeff;\n            color: #a55cef;*/\n          }\n        }\n      }\n      &:nth-child(6) {\n        .feature__block {\n          .icon__wrapper {\n            /*background: #ffecfa;\n            color: #e764a5;*/\n          }\n        }\n      }\n    }\n  }\n  &.only-title {\n    h2, p {\n      margin-bottom: 0;\n    }\n    .icon__wrapper {\n      @media (min-width: 575px) {\n        margin-bottom: 0;\n      }\n    }\n    .feature__block {\n      align-items: center;\n      .content__wrapper {\n        display: flex;\n        align-items: center;\n      }\n    }\n  }\n  &.title-sm {\n    .feature__block h2 {\n      font-size: 18px;\n    }\n  }\n  &.has-coming-soon {\n    .row > div:last-child {\n      .icon__wrapper {\n        background-color: rgba(228, 228, 228, 0.49);\n        i {\n          color: #B9B9B9;\n        }\n      }\n      h2 {\n        opacity: 0.6;\n      }\n    }\n  }\n`;\n\nexport default ServicesSectionWrapper;\n","import React, { Fragment } from 'react';\nimport { Link, useIntl } from 'gatsby-plugin-intl';\nimport PropTypes from 'prop-types';\nimport Box from '../../../components/reusecore/Box';\nimport Text from '../../../components/reusecore/Text';\nimport Heading from '../../../components/reusecore/Heading';\nimport FeatureBlock from '../../../components/common/FeatureBlock';\nimport Container from '../../../components/common/UI/Container';\nimport ServicesSectionWrapper from './services.style';\nimport Button from '../../../components/reusecore/Button';\n\n// import {Icon} from \"react-icons-kit\";\n// import {bullhorn} from 'react-icons-kit/fa/bullhorn';\n\nconst ServicesSection = ({\n  title,\n  row,\n  col,\n  sectionHeader,\n  sectionTitle,\n  sectionSubTitle,\n  featureTitle,\n  featureDescription,\n  featureLink,\n  iconStyle,\n  contentStyle,\n  blockWrapperStyle,\n  data,\n  className,\n  buttons,\n  btnStyle,\n  outlineBtnStyle,\n}) => {\n  const intl = useIntl();\n\n  const ButtonLink = (props) => {\n    return (\n      <a href={props.href} target={props.target} rel={props.rel}>\n        <Button {...props} />\n      </a>\n    );\n  };\n\n  const ButtonGroup = ({ buttons }) =>\n    buttons && buttons.length ? (\n      <Fragment>\n        {buttons.map((butt, index) => {\n          let styling;\n          if (butt.style === 'outline') {\n            styling = outlineBtnStyle;\n            styling.className = 'outlined sl-button-lg';\n            styling.variant = 'outlined';\n          } else {\n            styling = btnStyle;\n          }\n          return (\n            <ButtonLink\n              key={index}\n              title={butt.label}\n              href={butt.link}\n              target={butt.target}\n              className='sl-button-lg'\n              rel={butt.rel}\n              {...styling}\n            />\n          );\n        })}\n      </Fragment>\n    ) : null;\n\n  return (\n    <ServicesSectionWrapper className={className}>\n      <Container>\n        <Box {...sectionHeader}>\n          {/*<Text content=\"OUR FEATURES\" {...sectionSubTitle} />*/}\n          <Heading content={title} {...sectionTitle} />\n        </Box>\n        <Box className='row' {...row}>\n          {data.map((feature, index) => (\n            <Box className='col' {...col} key={index}>\n              <FeatureBlock\n                icon={<i className={feature.icon} />}\n                //icon={<Icon icon={bullhorn} size={40} />}\n                wrapperStyle={blockWrapperStyle}\n                iconStyle={iconStyle}\n                contentStyle={contentStyle}\n                title={\n                  <Heading\n                    content={intl.formatMessage({\n                      id: `${feature.idx}.title`,\n                    })}\n                    className={feature.class}\n                    {...featureTitle}\n                  />\n                }\n                description={\n                  feature.description && <div>\n                    <Text\n                      content={intl.formatMessage({\n                        id: `${feature.idx}.description`,\n                      })}\n                      {...featureDescription}\n                    />\n                    {feature.link && (\n                      <Link to={feature.link.path} style={{ color: '#086876' }}>\n                        {intl.formatMessage({\n                          id: `${feature.idx}.link`,\n                        })}\n                      </Link>\n                    )}\n                  </div>\n                }\n              />\n            </Box>\n          ))}\n        </Box>\n        {buttons ? (\n          <Box className='sl-buttons-container'>\n            <ButtonGroup buttons={buttons} />\n          </Box>\n        ) : null}\n      </Container>\n    </ServicesSectionWrapper>\n  );\n};\n\n// ServiceSection style props\nServicesSection.propTypes = {\n  sectionHeader: PropTypes.object,\n  row: PropTypes.object,\n  col: PropTypes.object,\n  sectionTitle: PropTypes.object,\n  sectionSubTitle: PropTypes.object,\n  featureTitle: PropTypes.object,\n  featureDescription: PropTypes.object,\n  featureLink: PropTypes.object,\n  titleStyle: PropTypes.object,\n  btnStyle: PropTypes.object,\n  outlineBtnStyle: PropTypes.object,\n};\n\n// ServiceSection default style\nServicesSection.defaultProps = {\n  // section header default style\n  sectionHeader: {\n    mb: ['30px', '40px', '50px', '80px'],\n  },\n  // sub section default style\n  sectionSubTitle: {\n    as: 'span',\n    display: 'block',\n    textAlign: 'center',\n    fontSize: '14px',\n    letterSpacing: '0.15em',\n    fontWeight: '700',\n    color: '#5268db',\n    mb: '10px',\n  },\n  // section title default style\n  sectionTitle: {\n    textAlign: 'center',\n    fontSize: ['26px', '28px', '32px', '36px', '40px'],\n    // fontWeight: '500',\n    // color: '#0f2137',\n    // letterSpacing: '-0.025em',\n    mb: '0',\n  },\n  // feature row default style\n  row: {\n    flexBox: true,\n    flexWrap: 'wrap',\n  },\n  // feature col default style\n  col: {\n    width: [1, 1 / 2, 1 / 2, 1 / 3],\n  },\n  // feature block wrapper default style\n  blockWrapperStyle: {\n    p: ['30px', '20px', '20px', '20px'],\n  },\n  // feature icon default style\n  iconStyle: {\n    width: ['50px', '60px'],\n    height: ['50px', '60px'],\n    borderRadius: '50%',\n    bg: '#93d26e',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: ['18px', '22px'],\n    color: '#ffffff',\n    overflow: 'hidden',\n    mb: '30px',\n    borderBottomLeftRadius: '50%',\n  },\n  // feature content default style\n  contentStyle: {\n    textAlign: 'left',\n    mt: '-5px',\n  },\n  // feature title default style\n  featureTitle: {\n    fontSize: ['18px', '20px'],\n    fontWeight: '400',\n    color: '#0f2137',\n    lineHeight: '1.5',\n    letterSpacing: '-0.020em',\n    mb: '10px',\n  },\n  // feature description default style\n  featureDescription: {\n    fontSize: '15px',\n    lineHeight: '1.75',\n    color: '#343d4ccc',\n  },\n  featureLink: {\n    color: '#086876',\n  },\n  btnStyle: {\n    minWidth: ['120px', '120px', '120px', '156px'],\n    fontSize: ['13px', '14px'],\n    fontWeight: '500',\n    colors: 'primaryWithBg',\n    mr: '18px',\n  },\n  outlineBtnStyle: {\n    minWidth: ['120px', '120px', '120px', '156px'],\n    fontSize: ['13px', '14px'],\n    fontWeight: '500',\n    color: 'primary',\n    mr: '18px',\n  },\n};\n\nexport default ServicesSection;\n","import styled from 'styled-components';\n\nconst DescriptionSectionsTitleWrapper = styled.section`\n\n  > div {\n    text-align: center;\n    padding-top: 100px;\n    border-top: 0.6px solid rgba(0, 0, 0, 0.17);\n\n    @media (max-width: 480px) {\n      padding-top: 40px;\n      padding-bottom: 40px;\n    }\n\n  }\n  \n  @media (max-width: 480px) {\n    padding: 0;\n  }\n\n`;\n\nexport default DescriptionSectionsTitleWrapper;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Box from '../../../components/reusecore/Box';\nimport Heading from '../../../components/reusecore/Heading';\nimport Container from '../../../components/common/UI/Container';\nimport DescriptionSectionsTitleWrapper from './descriptionSectionsTitle.style';\n\nconst DescriptionSectionsTitle = ({\n                             sectionTitle,\n                             title,\n                             className\n                         }) => {\n\n    return (\n        <DescriptionSectionsTitleWrapper className={className}>\n            <Container>\n                <Box>\n                    <Heading content={title} {...sectionTitle} />\n                </Box>\n            </Container>\n        </DescriptionSectionsTitleWrapper>\n    );\n};\n\n// DescriptionSectionsTitle style props\nDescriptionSectionsTitle.propTypes = {\n    sectionTitle: PropTypes.object\n};\n\n// DescriptionSectionsTitle default style\nDescriptionSectionsTitle.defaultProps = {\n    sectionTitle: {\n        textAlign: 'center',\n        fontSize: ['26px', '28px', '32px', '36px', '40px'],\n        mb: '0',\n    }\n};\n\nexport default DescriptionSectionsTitle;\n","import React from 'react';\nimport { graphql } from 'gatsby';\nimport { useIntl } from 'gatsby-plugin-intl';\nimport { GatsbyImage } from 'gatsby-plugin-image';\nimport Layout from '../../components/layout';\nimport Seo from '../../components/seo';\nimport BannerSection from '../../containers/Common/BannerSection';\nimport FeaturesSection from '../../containers/StreetlibFeatures/FeaturesSection';\nimport DescriptionSection from '../../containers/Common/DescriptionSection';\nimport ServicesSection from '../../containers/StreetlibHome/ServicesSection';\nimport DescriptionSectionsTitle from '../../containers/Common/DescriptionSectionsTitle';\nimport Button from '../../components/reusecore/Button';\nimport Container from '../../components/common/UI/Container';\n\nexport const query = graphql`\n  query DirectQuery {\n    allDirectBenefitsJson {\n      nodes {\n        idx\n        icon\n        class\n      }\n    }\n    allDirectFeaturesJson {\n      nodes {\n        idx\n        icon\n        class\n      }\n    }\n    HeroImgIT: file(name: { eq: \"direct-hero\" }) {\n      childImageSharp {\n        gatsbyImageData(layout: FULL_WIDTH, width: 1200)\n      }\n    }\n    HeroImgEN: file(name: { eq: \"direct-hero\" }) {\n      childImageSharp {\n        gatsbyImageData(layout: FULL_WIDTH, width: 1200)\n      }\n    }\n    Section1Image: file(name: { eq: \"direct-use-case-1\" }) {\n      childImageSharp {\n        gatsbyImageData(layout: FIXED, width: 500)\n      }\n    }\n    Section2Image: file(name: { eq: \"direct-use-case-2\" }) {\n      childImageSharp {\n        gatsbyImageData(layout: FIXED, width: 500)\n      }\n    }\n    Section3Image: file(name: { eq: \"direct-use-case-3\" }) {\n      childImageSharp {\n        gatsbyImageData(layout: FIXED, width: 500)\n      }\n    }\n  }\n`;\n\nconst Direct = ({ location, data }) => {\n  const intl = useIntl();\n  const lang = intl.locale;\n\n  const BENEFITS_DIRECT = data.allDirectBenefitsJson.nodes;\n  const FEATURES_DIRECT = data.allDirectFeaturesJson.nodes;\n\n  return (\n    <Layout location={location} lang={lang} greenHero directPreFooter minimal>\n      <Seo\n        title={intl.formatMessage({ id: 'direct.seo.title' })}\n        description={intl.formatMessage({ id: 'direct.seo.description' })}\n        keywords={[intl.formatMessage({ id: 'direct.seo.keywords' })]}\n        location={location}\n      />\n\n      <BannerSection\n        titleContent={intl.formatMessage({ id: 'direct.hero.title' })}\n        descriptionContent={intl.formatMessage({\n          id: 'direct.hero.description',\n        })}\n        buttons={[\n          {\n            label: intl.formatMessage({ id: 'direct.hero.button' }),\n            link: '#direct-form',\n            rel: 'noopener noreferrer',\n          },\n        ]}\n        className='banner-section-linear centered sl-green-bg direct-hero'\n        additionalContent={\n          <span className='banner-notes'>\n            {intl.formatMessage({ id: 'direct.cta.note' })}\n          </span>\n        }\n        bottomContent={\n          <GatsbyImage\n            image={\n              lang === 'it'\n                ? data.HeroImgIT.childImageSharp.gatsbyImageData\n                : data.HeroImgEN.childImageSharp.gatsbyImageData\n            }\n            alt='StreetLib Direct'\n          />\n        }\n      />\n\n      <FeaturesSection\n        title={intl.formatMessage({ id: 'direct.benefits.title' })}\n        data={BENEFITS_DIRECT}\n        className='only-title title-sm has-coming-soon'\n      />\n\n      <DescriptionSectionsTitle\n        title={intl.formatMessage({ id: 'direct.use-cases.title' })}\n        className='description-sections-title'\n      />\n\n      <DescriptionSection\n        title={intl.formatMessage({ id: 'direct.use-cases.section-1.title' })}\n        description={intl.formatMessage({\n          id: 'direct.use-cases.section-1.text',\n        })}\n        gatsbyImage={data.Section1Image.childImageSharp.gatsbyImageData}\n        imagePos='left'\n      />\n\n      <DescriptionSection\n        title={intl.formatMessage({ id: 'direct.use-cases.section-2.title' })}\n        description={intl.formatMessage({\n          id: 'direct.use-cases.section-2.text',\n        })}\n        gatsbyImage={data.Section2Image.childImageSharp.gatsbyImageData}\n        imagePos='right'\n      />\n\n      <DescriptionSection\n        title={intl.formatMessage({ id: 'direct.use-cases.section-3.title' })}\n        description={intl.formatMessage({\n          id: 'direct.use-cases.section-3.text',\n        })}\n        gatsbyImage={data.Section3Image.childImageSharp.gatsbyImageData}\n        imagePos='left'\n      />\n\n      <section>\n        <Container className='sl-cta-section sl-centered'>\n          <a href='#direct-form' rel='noopener noreferrer'>\n            <Button\n              aria-label={intl.formatMessage({ id: 'direct.hero.button' })}\n              title={intl.formatMessage({ id: 'direct.hero.button' })}\n            />\n          </a>\n        </Container>\n      </section>\n\n      <ServicesSection\n        title={intl.formatMessage({ id: 'direct.features.title' })}\n        data={FEATURES_DIRECT}\n        className='only-title title-sm has-coming-soon sl-blue-bg add-pb'\n      />\n    </Layout>\n  );\n};\n\nexport default Direct;\n"],"names":["ConditionalWrap","_ref","condition","wrapper","children","styled","section","withConfig","displayName","componentId","themeGet","FeaturesSection","pretitle","title","data","row","col","sectionHeader","sectionTitle","sectionSubTitle","featureTitle","featureDescription","iconStyle","contentStyle","blockWrapperStyle","background","className","intl","useIntl","React","FeatureSectionWrapper","Container","Box","Text","Object","assign","content","Heading","map","feature","index","key","link","Link","to","FeatureBlock","icon","wrapperStyle","formatMessage","id","idx","description","defaultProps","mb","as","display","textAlign","fontSize","letterSpacing","fontWeight","color","mt","flexBox","flexWrap","width","p","height","borderRadius","bg","alignItems","justifyContent","overflow","borderBottomLeftRadius","lineHeight","ServicesSection","featureLink","buttons","btnStyle","outlineBtnStyle","ButtonLink","props","href","target","rel","Button","ButtonGroup","_ref2","length","Fragment","butt","styling","style","variant","label","ServicesSectionWrapper","class","path","minWidth","colors","mr","DescriptionSectionsTitle","DescriptionSectionsTitleWrapper","location","lang","locale","BENEFITS_DIRECT","allDirectBenefitsJson","nodes","FEATURES_DIRECT","allDirectFeaturesJson","Layout","greenHero","directPreFooter","minimal","Seo","keywords","BannerSection","titleContent","descriptionContent","additionalContent","bottomContent","GatsbyImage","image","HeroImgIT","childImageSharp","gatsbyImageData","HeroImgEN","alt","DescriptionSection","gatsbyImage","Section1Image","imagePos","Section2Image","Section3Image"],"sourceRoot":""}