{"version":3,"file":"component---src-pages-smart-pmps-js-f79bafe629a64c1a7992.js","mappings":"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","sources":["webpack://gatsby-starter-default/./node_modules/use-media/lib/index.js","webpack://gatsby-starter-default/./node_modules/use-media/lib/useMedia.js","webpack://gatsby-starter-default/./node_modules/use-media/lib/utilities/camelToHyphen.js","webpack://gatsby-starter-default/./node_modules/use-media/lib/utilities/index.js","webpack://gatsby-starter-default/./node_modules/use-media/lib/utilities/noop.js","webpack://gatsby-starter-default/./node_modules/use-media/lib/utilities/queryObjectToString.js","webpack://gatsby-starter-default/./src/components/hero4/index.js","webpack://gatsby-starter-default/./src/components/productsHighlight/index.js","webpack://gatsby-starter-default/./src/pages/smart-pmps.js","webpack://gatsby-starter-default/./src/assets/images/wave21-mobile.png","webpack://gatsby-starter-default/./src/assets/images/wave21.png"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nvar useMedia_1 = require(\"./useMedia\");\nexports.default = useMedia_1.default;\nexports.useMedia = useMedia_1.useMedia;\nexports.useMediaLayout = useMedia_1.useMediaLayout;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nvar react_1 = require(\"react\");\nvar utilities_1 = require(\"./utilities\");\nexports.mockMediaQueryList = {\n  media: '',\n  matches: false,\n  onchange: utilities_1.noop,\n  addListener: utilities_1.noop,\n  removeListener: utilities_1.noop,\n  addEventListener: utilities_1.noop,\n  removeEventListener: utilities_1.noop,\n  dispatchEvent: function dispatchEvent(_) {\n    return true;\n  }\n};\nvar createUseMedia = function createUseMedia(effect) {\n  return function (rawQuery, defaultState) {\n    if (defaultState === void 0) {\n      defaultState = false;\n    }\n    var _a = react_1.useState(defaultState),\n      state = _a[0],\n      setState = _a[1];\n    var query = utilities_1.queryObjectToString(rawQuery);\n    effect(function () {\n      var mounted = true;\n      var mediaQueryList = typeof window === 'undefined' ? exports.mockMediaQueryList : window.matchMedia(query);\n      var onChange = function onChange() {\n        if (!mounted) {\n          return;\n        }\n        setState(Boolean(mediaQueryList.matches));\n      };\n      mediaQueryList.addListener(onChange);\n      setState(mediaQueryList.matches);\n      return function () {\n        mounted = false;\n        mediaQueryList.removeListener(onChange);\n      };\n    }, [query]);\n    return state;\n  };\n};\nexports.useMedia = createUseMedia(react_1.useEffect);\nexports.useMediaLayout = createUseMedia(react_1.useLayoutEffect);\nexports.default = exports.useMedia;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nfunction camelToHyphen(camelString) {\n  return camelString.replace(/[A-Z]/g, function (string) {\n    return \"-\" + string.toLowerCase();\n  }).toLowerCase();\n}\nexports.default = camelToHyphen;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nvar camelToHyphen_1 = require(\"./camelToHyphen\");\nexports.camelToHyphen = camelToHyphen_1.default;\nvar queryObjectToString_1 = require(\"./queryObjectToString\");\nexports.queryObjectToString = queryObjectToString_1.default;\nvar noop_1 = require(\"./noop\");\nexports.noop = noop_1.default;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nfunction noop() {}\nexports.default = noop;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nvar camelToHyphen_1 = require(\"./camelToHyphen\");\nvar QUERY_COMBINATOR = ' and ';\nfunction queryObjectToString(query) {\n  if (typeof query === 'string') {\n    return query;\n  }\n  return Object.entries(query).map(function (_a) {\n    var feature = _a[0],\n      value = _a[1];\n    var convertedFeature = camelToHyphen_1.default(feature);\n    var convertedValue = value;\n    if (typeof convertedValue === 'boolean') {\n      return convertedValue ? convertedFeature : \"not \" + convertedFeature;\n    }\n    if (typeof convertedValue === 'number' && /[height|width]$/.test(convertedFeature)) {\n      convertedValue = convertedValue + \"px\";\n    }\n    return \"(\" + convertedFeature + \": \" + convertedValue + \")\";\n  }).join(QUERY_COMBINATOR);\n}\nexports.default = queryObjectToString;","import React from 'react';\nimport styled from 'styled-components';\nimport useMedia from 'use-media';\n\nimport { LazyLoadImage } from 'react-lazy-load-image-component';\nimport 'react-lazy-load-image-component/src/effects/blur.css';\n\nimport GoldenButton from 'components/buttons/GoldenButton';\nimport HollowButton from 'components/buttons/HollowButton';\n\nconst Container = styled.div`\n    margin: 0;\n    color: white;\n    text-align: center;\n    width: 100%;\n    height: 100vh;\n    position: relative;\n    @media screen and (max-width: 1440px) {\n    }\n`;\nconst Content = styled.div`\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    margin-left: auto;\n    margin-right: auto;\n    z-index: 1;\n    @media screen and (max-width: 767px) {\n    }\n`;\n\nconst Title = styled.div`\n    margin-top: auto;\n    font-size: 80px;\n    line-height: 80px;\n    margin-bottom: 33px;\n\n    width: ${props => (props.img ? '440px' : 'auto')};\n    height: ${props => (props.img ? '114px' : 'auto')};\n    max-width: 740px;\n\n    background: url(${props => props.img}) no-repeat center;\n    background-size: contain;\n    margin-left: auto;\n    margin-right: auto;\n    font-family: 'Renogare-Regular';\n    user-select: none;\n    letter-spacing: -2px;\n    text-align: center;\n    @media screen and (max-width: 767px) {\n        font-size: 44px;\n        line-height: 48px;\n        letter-spacing: -2.29px;\n        margin-bottom: ${props => (props.type === 0 ? '98px' : '25px')};\n        max-width: 100%;\n        margin-left: 24px;\n        margin-right: 24px;\n        width: calc(100% - 48px);\n        background: url(${props => props.img}) no-repeat center;\n        background-size: contain;\n    }\n`;\nconst Desc = styled.div`\n    font-family: 'Neuzeit Grotesk';\n    font-size: 23px;\n    line-height: 32px;\n    letter-spacing: normal;\n    user-select: none;\n    max-width: 720px;\n    margin-left: auto;\n    margin-right: auto;\n    @media screen and (max-width: 767px) {\n        max-width: 100%;\n        margin-left: 24px;\n        margin-right: 24px;\n    }\n`;\nconst ButtonsContainer = styled.div`\n    margin-top: 34px;\n    display: flex;\n    justify-content: center;\n    margin-bottom: -80px;\n    & > * {\n        margin: 0 8px;\n    }\n    @media screen and (max-width: 767px) {\n        margin-top: 34px;\n    }\n`;\n\nconst DesktopLayout = styled.div`\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: relative;\n\n    & > div {\n        padding-top: 0 !important;\n        div {\n            display: none;\n        }\n        button {\n            display: none;\n        }\n        video {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            outline: none;\n            user-select: none;\n        }\n    }\n\n    z-index: 0;\n    @media screen and (max-width: 767px) {\n        display: none;\n    }\n`;\nconst MobileLayout = styled.div`\n    display: none;\n    @media screen and (max-width: 767px) {\n        display: block;\n        width: 100%;\n        height: 100%;\n        position: relative;\n        z-index: 0;\n    }\n`;\nconst MaskContainer = styled.div`\n    width: 100%;\n    margin-top: auto;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    img {\n        width: 100%;\n    }\n    @media screen and (max-width: 767px) {\n        img {\n            width: auto;\n            height: 100px;\n        }\n        margin-bottom: -1px;\n    }\n`;\nconst Overlay = styled.div`\n    background: rgba(0, 0, 0, 0.5);\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    z-index: 1;\n`;\nexport default function Hero4({\n    title,\n    description,\n    image,\n    buttons = [],\n    desktop_image,\n    mobile_image,\n    mask_image,\n    type = 0,\n    back = 'bright',\n}) {\n    const isWide = useMedia({ minWidth: 767 });\n\n    return (\n        <Container>\n            <Content>\n                <Title img={image} type={type}>\n                    {title}\n                </Title>\n                <Desc>{description}</Desc>\n                <ButtonsContainer>\n                    {buttons.map(button => {\n                        return (\n                            <React.Fragment key={button.title}>\n                                {button.theme === 'golden' ? (\n                                    <GoldenButton {...button}>\n                                        {button.title}\n                                    </GoldenButton>\n                                ) : button.theme === 'hollow' ? (\n                                    <HollowButton {...button}>\n                                        {button.title}\n                                    </HollowButton>\n                                ) : null}\n                            </React.Fragment>\n                        );\n                    })}\n                </ButtonsContainer>\n\n                <MaskContainer>\n                    <img\n                        src={mask_image}\n                        alt=\"\"\n                        style={{ objectFit: 'cover' }}\n                    />\n                </MaskContainer>\n            </Content>\n            {isWide ? (\n                <DesktopLayout>\n                    <Overlay />\n                    <LazyLoadImage\n                        alt={title}\n                        effect=\"blur\"\n                        src={desktop_image} // use normal <img> attributes as props\n                        width={'100%'}\n                        height={'100%'}\n                        style={{ objectFit: 'cover' }}\n                    />\n                </DesktopLayout>\n            ) : (\n                <MobileLayout>\n                    <Overlay />\n                    <LazyLoadImage\n                        alt={title}\n                        effect=\"blur\"\n                        src={mobile_image} // use normal <img> attributes as props\n                        width={'100%'}\n                        height={'100%'}\n                        style={{ objectFit: 'cover' }}\n                    />\n                </MobileLayout>\n            )}\n        </Container>\n    );\n}\n","import React from 'react';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n    margin-top: 30px;\n    margin-bottom: 70px;\n    display: block;\n    width: calc(100% - 128px);\n    margin-left: 64px;\n    margin-right: 64px;\n    user-select: none;\n    @media screen and (max-width: 768px) {\n        margin-left: 24px;\n        margin-right: 24px;\n        margin-top: 30px;\n        margin-bottom: 30px;\n        width: calc(100% - 48px);\n    }\n`;\n\nconst Heading = styled.div`\n    font-size: 36px;\n    letter-spacing: -1.5px;\n    line-height: 40px;\n    text-align: center;\n    color: white;\n    font-family: 'Renogare-Regular';\n    max-width: 640px;\n    margin-left: auto;\n    margin-right: auto;\n    margin-bottom: 30px;\n    white-space: pre-wrap;\n    @media screen and (max-width: 768px) {\n        font-size: 26px;\n        line-height: 32px;\n        letter-spacing: -1px;\n        color: white;\n        margin-top: 0;\n        margin-bottom: 23px;\n        text-align: left;\n    }\n`;\nconst FeatureContainer = styled.div`\n    margin-top: 29px;\n    display: flex;\n    flex-wrap: wrap;\n    @media screen and (max-width: 768px) {\n    }\n`;\nconst Feature = styled.div`\n    width: calc(33.33% - 66px);\n    text-align: left;\n    border-right: 1px solid rgba(255, 255, 255, 0.1);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n    display: flex;\n    flex-direction: row;\n    padding: 32px;\n    padding: 20px 30px 30px 30px;\n    &:nth-child(3n) {\n        border-right: none;\n    }\n    &:nth-child(n + 4) {\n        border-bottom: none;\n        padding: 30px 30px 20px 30px;\n        @media screen and (max-width: 767px) {\n            padding: 0;\n        }\n    }\n    @media screen and (max-width: 767px) {\n        width: 100%;\n        border: none;\n        padding: 0;\n    }\n`;\nconst FeatureImg = styled.div`\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    width: 64px;\n    @media screen and (max-width: 767px) {\n        min-width: 52px;\n    }\n`;\nconst FeatureContent = styled.div`\n    width: 100%;\n    margin-left: 20px;\n    @media screen and (max-width: 767px) {\n        /* margin: 0 0 30px 0; */\n        padding-bottom: 23px;\n        margin-bottom: 23px;\n        border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n        ${Feature}:last-child > & {\n            border-bottom: none;\n        }\n    }\n`;\nconst FeatureHeading = styled.div`\n    font-family: 'Renogare-Regular';\n    font-size: 16px;\n    line-height: 24px;\n    letter-spacing: -0.2px;\n    color: white;\n    text-align: left;\n    @media screen and (max-width: 767px) {\n    }\n`;\nconst FeatureDesc = styled.div`\n    margin-top: 8px;\n    text-align: left;\n    font-family: 'Neuzeit Grotesk';\n    font-size: 15px;\n    line-height: 20px;\n    letter-spacing: normal;\n    color: rgba(255, 255, 255, 0.7);\n    @media screen and (max-width: 767px) {\n    }\n`;\nconst Desc = styled.div`\n    font-family: 'Neuzeit Grotesk';\n    font-size: 17px;\n    line-height: 24px;\n    letter-spacing: normal;\n    text-align: center;\n    color: rgba(255, 255, 255, 0.7);\n    margin-top: 34px;\n    max-width: 640px;\n    text-align: center;\n    margin-left: auto;\n    margin-right: auto;\n    @media screen and (max-width: 767px) {\n        margin-top: 26px;\n        text-align: left;\n    }\n`;\n\nconst Highlight = ({ title, description, image }) => {\n    return (\n        <Feature>\n            <FeatureImg>\n                <img width=\"52px\" src={image} alt={title}></img>\n            </FeatureImg>\n            <FeatureContent>\n                <FeatureHeading>{title}</FeatureHeading>\n                <FeatureDesc>{description}</FeatureDesc>\n            </FeatureContent>\n        </Feature>\n    );\n};\nexport default function ProductsHighlight({ title, description, features }) {\n    return (\n        <Container>\n            <Heading>{title}</Heading>\n            {!!description && <Desc>{description}</Desc>}\n\n            <FeatureContainer>\n                {features.map(feature => {\n                    return <Highlight key={feature.title} {...feature} />;\n                })}\n            </FeatureContainer>\n        </Container>\n    );\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport { graphql } from 'gatsby';\n\nimport ProductsHighlight from '../components/productsHighlight';\n\nimport Layout from '../layout/main';\nimport SEOComponent from '../components/seo';\nimport Hero4 from '../components/hero4';\nimport CTAComponent from '../components/cta';\nimport Wave1Img from './../assets/images/wave21.png';\nimport Wave1MobileImg from './../assets/images/wave21-mobile.png';\n\nconst Intro = styled.div`\n    display: flex;\n    flex-direction: row;\n    padding-top: 0px;\n    padding-left: 64px;\n    padding-right: 64px;\n    width: calc(100% - 128px);\n    justify-content: space-between;\n    background: #fafafa;\n    padding-bottom: 88px;\n    @media screen and (max-width: 767px) {\n        flex-direction: column;\n        padding-left: 24px;\n        padding-right: 24px;\n        width: calc(100% - 48px);\n        padding-top: 70px;\n        padding-bottom: 104px;\n    }\n`;\nconst IntroContent = styled.div`\n    width: 49%;\n    @media screen and (max-width: 767px) {\n        width: 100%;\n    }\n`;\nconst IntroTitle = styled.div`\n    font-family: 'Renogare-Regular';\n    font-size: 36px;\n    line-height: 40px;\n    letter-spacing: -1px;\n    text-align: left;\n    margin-top: 118px;\n    @media screen and (max-width: 767px) {\n        font-size: 26px;\n        line-height: 32px;\n        margin-top: 0;\n    }\n`;\nconst IntroDesc = styled.div`\n    font-family: 'Neuzeit Grotesk';\n    margin-top: 26px;\n    font-size: 17px;\n    line-height: 24px;\n    color: rgba(25, 23, 26, 0.9);\n    letter-spacing: normal;\n    text-align: left;\n    white-space: pre-wrap;\n    @media screen and (max-width: 767px) {\n        margin-top: 22px;\n    }\n`;\nconst IntroImage = styled.div`\n    width: 48%;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    @media screen and (max-width: 767px) {\n        width: 100%;\n    }\n`;\nconst Main = styled.div`\n    padding-top: 60px;\n    padding-bottom: 160px;\n    margin-bottom: 80px;\n    background: url(${Wave1Img}) no-repeat bottom;\n    background-size: 100%;\n    @media screen and (max-width: 767px) {\n        background: url(${Wave1MobileImg}) no-repeat bottom;\n        background-size: 100%;\n        padding-top: 95px;\n        padding-bottom: 95px;\n        margin-bottom: 60px;\n    }\n`;\nexport default function SmartPMPsPage({ data }) {\n    const {\n        seo_content,\n        hero,\n        smart_pmps_intro,\n        benefits,\n        book_now,\n    } = data.butterPage;\n    return (\n        <Layout menu=\"FOR PUBLISHERS\">\n            <SEOComponent\n                title=\"SmartPMPs\"\n                image={seo_content.sharing_image}\n                description={seo_content.seo_description}\n            />\n            <Hero4 {...hero[0]} type={1}></Hero4>\n            <Intro>\n                <IntroContent>\n                    <IntroTitle>{smart_pmps_intro.title}</IntroTitle>\n                    <IntroDesc>{smart_pmps_intro.description}</IntroDesc>\n                </IntroContent>\n                <IntroImage>\n                    <img\n                        width=\"100%\"\n                        src={smart_pmps_intro.image}\n                        alt={smart_pmps_intro.title}\n                    />\n                </IntroImage>\n            </Intro>\n            <Main>\n                <ProductsHighlight {...benefits[0]} />\n            </Main>\n            <CTAComponent {...book_now[0]} />\n        </Layout>\n    );\n}\n\nexport const smartPMPsPageQuery = graphql`\n    query {\n        butterPage(slug: { eq: \"smart-pmps\" }) {\n            seo_content {\n                seo_description\n                sharing_image\n            }\n            hero {\n                title\n                image\n                description\n                desktop_image\n                mobile_image\n                mask_image\n                buttons {\n                    type\n                    title\n                    theme\n                    url\n                }\n            }\n            smart_pmps_intro {\n                title\n                description\n                image\n            }\n            benefits {\n                title\n                description\n                features {\n                    title\n                    description\n                    image\n                }\n            }\n            book_now {\n                button_title\n                title\n            }\n        }\n    }\n`;\n","export default __webpack_public_path__ + \"static/wave21-mobile-0d6397ea83b390716865d1b7cdaaee6c.png\";","export default __webpack_public_path__ + \"static/wave21-3151e64a7f13096488fdf673d2ee13b6.png\";"],"names":["useMedia_1","exports","default","useMedia","useMediaLayout","Object","defineProperty","value","react_1","utilities_1","mockMediaQueryList","media","matches","onchange","noop","addListener","removeListener","addEventListener","removeEventListener","dispatchEvent","_","createUseMedia","effect","rawQuery","defaultState","_a","useState","state","setState","query","queryObjectToString","mounted","mediaQueryList","window","matchMedia","onChange","Boolean","useEffect","useLayoutEffect","camelString","replace","string","toLowerCase","camelToHyphen_1","camelToHyphen","queryObjectToString_1","noop_1","entries","map","feature","convertedFeature","convertedValue","test","join","Container","styled","displayName","componentId","Content","Title","props","img","type","Desc","ButtonsContainer","DesktopLayout","MobileLayout","MaskContainer","Overlay","Hero4","title","description","image","buttons","desktop_image","mobile_image","mask_image","back","isWide","minWidth","_jsxs","children","_jsx","button","React","theme","GoldenButton","HollowButton","src","alt","style","objectFit","LazyLoadImage","width","height","Heading","FeatureContainer","Feature","FeatureImg","FeatureContent","FeatureHeading","FeatureDesc","Highlight","ProductsHighlight","features","Intro","IntroContent","IntroTitle","IntroDesc","IntroImage","Main","Wave1Img","Wave1MobileImg","SmartPMPsPage","data","seo_content","hero","smart_pmps_intro","benefits","book_now","butterPage","Layout","menu","SEOComponent","sharing_image","seo_description","CTAComponent"],"sourceRoot":""}