{"version":3,"file":"component---src-pages-main-js-067e01be47eea37c2cc4.js","mappings":"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","sources":["webpack://Listener/./src/components/listenerUspMedia.js","webpack://Listener/./src/components/responsiveImage.js","webpack://Listener/./src/pages/main.js"],"sourcesContent":["import React from \"react\";\n\nimport GetWebpFormat from \"../utils/getWebpFormat\";\nimport ResponsiveImage from \"./responsiveImage\";\n\nconst ListenerUspMedia = (url, altText) => {\n  const extension = url.substr(url.lastIndexOf('.') + 1);\n\n  if (extension === 'mp4') {\n    return (\n      <picture>\n        <video autoplay=\"true\" loop muted>\n          <source src={GetWebpFormat(url)} type=\"video/mp4\" />\n        </video>\n      </picture>\n    )\n  }\n\n  return <ResponsiveImage src={url} alt={altText} />\n}\n\nexport default ListenerUspMedia;\n","import React from \"react\";\n\nimport GetWebpFormat from \"../utils/getWebpFormat\";\n\nconst ResponsiveImage = (props) => {\n  const src = props.src;\n\n  const insertResponsiveParamsAt = 'upload/'\n  const indexToInsertResponsiveParams = src.indexOf(insertResponsiveParamsAt) + (insertResponsiveParamsAt.length);\n\n  const breakpoints = [1366, 768, 375];\n\n  const extension = src.substr(src.lastIndexOf('.') + 1);\n\n  const getResponsiveImageSrc = (width) => {\n    let responsiveParams = `w_${width},f_auto/`;\n\n    if (extension === 'gif') {\n      responsiveParams = `w_${width}/`;\n    }\n\n    return src.substr(0, indexToInsertResponsiveParams) + responsiveParams + src.substr(indexToInsertResponsiveParams);\n  }\n\n  return (\n    <picture>\n      {\n        breakpoints.map(breakpoint => {\n          return (\n            <source\n              key={breakpoint}\n              media={`(min-width: ${breakpoint}px)`}\n              srcSet={getResponsiveImageSrc(breakpoint)}\n            />\n          )\n        })\n      }\n\n      <img src={GetWebpFormat(src)} alt={props.alt}/>\n    </picture>\n  )\n}\n\nexport default ResponsiveImage;\n","import React, { useEffect } from \"react\"\n\nimport \"aos/dist/aos.css\"\n\nimport Layout from \"../components/common/layout/layout\"\nimport SEO from \"../components/common/seo\"\n\nimport ListenerUspMedia from \"../components/listenerUspMedia\"\nimport NotFoundPage from \"./404\"\n\nimport GetWebpFormat from \"../utils/getWebpFormat\"\nimport { sendAmplitudeData, initAmplitude } from \"../utils/amplitude\"\nimport { AmplitudeEvents } from \"../types/amplitudeEvents\"\n\nconst IndexPage = context => {\n  const landingPageConfigs = context.pageContext.node\n  const headerData = context.pageContext.headerConfigurations\n  const footerData = context.pageContext.footerConfigurations\n\n  useEffect(() => {\n    window.scrollTo(0, 0)\n\n    initAmplitude()\n    const extraParams = {}\n    if (document && document.referrer) {\n      extraParams[\"ref-url\"] = document.referrer\n    }\n    sendAmplitudeData(AmplitudeEvents.MARKETING_PAGE_VISITED, extraParams)\n\n    const AOS = require(\"aos\")\n    AOS.init({\n      duration: 1800,\n      once: true,\n    })\n\n    if (AOS) {\n      AOS.refresh()\n    }\n\n    if (document.querySelector(\".js-videoPoster\")) {\n      document.querySelector(\".js-videoPoster\").onclick = event => {\n        event.preventDefault()\n\n        const $currentElement = event.target.closest(\".js-videoPoster\")\n        videoPlay($currentElement.closest(\".js-videoWrapper\"))\n      }\n    }\n  }, [])\n\n  const onClickHandler = () => {\n    sendAmplitudeData(AmplitudeEvents.HOMEPAGE_CTA_CLICKED)\n    window.location.href = landingPageConfigs.hero_section.cta_button.url\n  }\n\n  function videoPlay($wrapper) {\n    const $iframe = $wrapper.querySelector(\".js-videoIframe\")\n\n    $wrapper.classList.add(\"videoWrapperActive\")\n    $iframe.setAttribute(\"src\", $iframe.dataset[\"src\"])\n  }\n\n  if (!landingPageConfigs) return <NotFoundPage />\n\n  return (\n    <Layout headerData={headerData} footerData={footerData}>\n      {landingPageConfigs.seo && <SEO seo={landingPageConfigs.seo} />}\n\n      <section className=\"hero-section\">\n        <div className=\"content-layer\">\n          <h1 className=\"h1\" data-aos=\"animate-reveal\">\n            {landingPageConfigs.hero_section.caption}\n          </h1>\n          <p className=\"h2\" data-aos=\"animate-reveal\">\n            {landingPageConfigs.hero_section.body_text}\n          </p>\n\n          <div data-aos=\"animate-reveal\" className=\"cta-wrapper\">\n            <a\n              onClick={onClickHandler}\n              className=\"cta-button\"\n              target={landingPageConfigs.hero_section.cta_button.target}\n            >\n              {landingPageConfigs.hero_section.cta_button.button_text}\n            </a>\n            <br />\n            <span className=\"cta-alert\">\n              *works with licensed Zoom accounts only\n            </span>\n          </div>\n\n          <div\n            data-aos=\"animate-reveal\"\n            className=\"video-wrapper videoWrapper169 js-videoWrapper\"\n          >\n            <div className=\"square-logo-wrapper\" data-aos=\"animate-reveal\">\n              <img\n                className=\"square-logo\"\n                alt=\"listener\"\n                src=\"https://res.cloudinary.com/listener-cms/image/upload/f_auto/v1609931412/listener-square-logo_kmwotc.svg\"\n              />\n            </div>\n\n            <iframe\n              className=\"videoIframe js-videoIframe\"\n              title=\"homepage-video\"\n              src=\"\"\n              frameBorder=\"0\"\n              allowtransparency=\"true\"\n              autoPlay={true}\n              allowFullScreen\n              allow=\"autoplay\"\n              data-src={`https://www.youtube.com/embed/${landingPageConfigs.hero_section.VideoContainer.video_id}?autoplay=1&modestbranding=1&rel=0`}\n            ></iframe>\n\n            <button\n              className=\"videoPoster js-videoPoster\"\n              aria-label=\"Video Background Image\"\n              style={{\n                backgroundImage: `url(${GetWebpFormat(\n                  landingPageConfigs.hero_section.VideoContainer\n                    .cover_image_desktop.url\n                )})`,\n              }}\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"159.933\"\n                height=\"159.933\"\n                viewBox=\"0 0 159.933 159.933\"\n              >\n                <g transform=\"translate(-520 -258)\">\n                  <circle\n                    opacity=\"0.6\"\n                    cx=\"79.967\"\n                    cy=\"79.967\"\n                    r=\"79.967\"\n                    transform=\"translate(520 258)\"\n                  />\n                  <path\n                    fill=\"#fff\"\n                    d=\"M111.652,76.751,63.974,50.162a2.086,2.086,0,0,0-3.1,1.821v53.849a2.086,2.086,0,0,0,3.1,1.821L111.65,81.12a2.5,2.5,0,0,0,0-4.369\"\n                    transform=\"translate(519 259.084)\"\n                  />\n                </g>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <div className=\"background-layer\" role=\"presentation\">\n          <div\n            data-aos=\"animate-yellow-triangle\"\n            className=\"yellow-triangle\"\n          ></div>\n          <div\n            data-aos=\"animate-muti-triangle-artwork\"\n            className=\"abstract-art\"\n          ></div>\n          <div\n            data-aos=\"animate-triangle-pattern-sand\"\n            className=\"triangle-pattern-sand\"\n          ></div>\n          <div\n            data-aos=\"animate-triangle-arrow-pattern-blue\"\n            className=\"triangle-pattern-aqua\"\n          ></div>\n        </div>\n      </section>\n\n      <section className=\"features-section\">\n        <h2 className=\"features-section-heading\">\n          {landingPageConfigs.usps_section.section_heading}\n        </h2>\n\n        <ul className=\"feature-list\">\n          {landingPageConfigs.usps_section.listener_usps.map(\n            (listenerUspSection, index) => {\n              return (\n                <li key={index}>\n                  <div className=\"feature-wrapper\">\n                    <div className=\"feature\">\n                      <div className=\"feature-content\">\n                        <h4>{listenerUspSection.heading}</h4>\n                        <p>{listenerUspSection.description}</p>\n                      </div>\n\n                      {listenerUspSection.media &&\n                        ListenerUspMedia(\n                          listenerUspSection.media.url,\n                          listenerUspSection.heading\n                        )}\n\n                      <div className=\"feature-background-wrapper\">\n                        <div className=\"feature-background\">\n                          <span className=\"sand\"></span>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </li>\n              )\n            }\n          )}\n        </ul>\n      </section>\n\n      <section className=\"benefits-section\">\n        <div className=\"content-layer\">\n          <h3 className=\"benefits-section-heading\" data-aos=\"animate-reveal\">\n            {landingPageConfigs.benefits_section.section_heading}\n          </h3>\n          <img\n            data-aos=\"animate-reveal\"\n            className=\"listener-arrows\"\n            alt=\"listener-arrows\"\n            src=\"https://res.cloudinary.com/listener-cms/image/upload/f_auto/v1608715486/listerner-icon-arrows_xarkwv.svg\"\n          />\n\n          <div data-aos=\"animate-reveal\">\n            {landingPageConfigs.benefits_section.benefits.map(\n              (benefit, index) => {\n                return (\n                  <div\n                    className={`content-block content-block-${index}`}\n                    key={index}\n                  >\n                    <h6>{benefit.heading}</h6>\n                    <p>{benefit.description}</p>\n                  </div>\n                )\n              }\n            )}\n          </div>\n        </div>\n\n        <div className=\"background-layer\" role=\"presentation\">\n          <div\n            data-aos=\"animate-benefits-abstract-art\"\n            data-aos-anchor=\".listener-arrows\"\n            className=\"abstract-art\"\n          ></div>\n          <div\n            data-aos=\"animate-benefits-triangle-pattern-sand\"\n            data-aos-anchor=\".listener-arrows\"\n            className=\"triangle-pattern-sand\"\n          ></div>\n          <div\n            data-aos=\"animate-benefits-triangle-pink\"\n            data-aos-anchor=\".listener-arrows\"\n            className=\"triangle-pink\"\n          ></div>\n          <div\n            data-aos=\"animate-benefits-triangle-pattern-aqua\"\n            className=\"triangle-pattern-aqua\"\n          ></div>\n        </div>\n      </section>\n\n      <section className=\"cta-jumbo-section for-home-page\">\n        <h5>{landingPageConfigs.cta_section.caption}</h5>\n        <div>\n          <a\n            href={landingPageConfigs.cta_section.url}\n            className=\"cta-button\"\n            target={landingPageConfigs.cta_section.target}\n          >\n            {landingPageConfigs.cta_section.button_text}\n          </a>\n        </div>\n      </section>\n    </Layout>\n  )\n}\n\nexport default IndexPage\n"],"names":["ListenerUspMedia","url","altText","substr","lastIndexOf","React","autoplay","loop","muted","src","GetWebpFormat","type","ResponsiveImage","alt","props","insertResponsiveParamsAt","indexToInsertResponsiveParams","indexOf","extension","getResponsiveImageSrc","width","responsiveParams","map","breakpoint","key","media","srcSet","context","landingPageConfigs","pageContext","node","headerData","headerConfigurations","footerData","footerConfigurations","useEffect","window","scrollTo","initAmplitude","extraParams","document","referrer","sendAmplitudeData","AmplitudeEvents","AOS","require","init","duration","once","refresh","querySelector","onclick","event","preventDefault","$wrapper","$iframe","classList","add","setAttribute","dataset","videoPlay","target","closest","Layout","seo","SEO","className","hero_section","caption","body_text","onClick","onClickHandler","location","href","cta_button","button_text","title","frameBorder","allowtransparency","autoPlay","allowFullScreen","allow","VideoContainer","video_id","style","backgroundImage","cover_image_desktop","xmlns","height","viewBox","transform","opacity","cx","cy","r","fill","d","role","usps_section","section_heading","listener_usps","listenerUspSection","index","heading","description","benefits_section","benefits","benefit","cta_section","NotFoundPage"],"sourceRoot":""}