{"version":3,"sources":["webpack:///./src/pages/integrations/analytics.js","webpack:///./src/pages/integrations/for-ux-designers.js","webpack:///./src/img/ui/arrow_black.svg","webpack:///./src/components/marketplace/banner/styled.js","webpack:///./src/components/marketplace/banner/index.js"],"names":["ExtendGridBox","styled","GridBox","media","tablet","mobile","Analytics","mostPopularCard","frontmatter","items","filter","item","title","metaTitle","canonical","metaDescription","className","href","src","arrow","alt","activeCategory","underlineColor","hideTitle","card","text","UXDesigners","module","exports","Banner","div","desktopWide","MainContent","Card","a","StyledLink","getCurrentCat","data","flatMap","list","image","link","img","star","desc","withArrow","tag"],"mappings":"mGAAA,+MAYaA,EAAgBC,YAAOC,WAAV,+EAAGD,CAAH,wgBAQtBE,IAAMC,OAUND,IAAME,QA2DKC,UArCG,WAChB,IAAOC,EAAmBC,IAAYC,MAAMC,QAAO,SAACC,GAAD,MAAyB,qBAAfA,EAAKC,SAAlE,GACA,OACE,kBAAC,IAAD,CACEC,UAAU,2BACVC,UAAU,2BACVC,gBAAgB,yEAEhB,yBAAKC,UAAU,aACb,kBAAChB,EAAD,KACE,yBAAKgB,UAAU,eACb,2BACE,uBAAGC,KAAK,kBAAR,iBAEF,yBAAKC,IAAKC,IAAOC,IAAI,QAAQR,MAAM,UACnC,2BACE,uBAAGK,KAAK,4BACN,gDAIN,kBAAC,IAAD,CAASI,eAAe,YAAYC,eAAe,YACnD,kBAAC,IAAD,CAASD,eAAe,YAAYE,WAAS,GAC3C,kBAAC,IAAD,CACEF,eAAe,YACfG,KAAMjB,EACNkB,KAAK,wEACLH,eAAe,cAIrB,kBAAC,IAAD,U,oCCnFR,yIA8CeI,UApCK,WAClB,IAAOnB,EAAmBC,IAAYC,MAAMC,QAAO,SAACC,GAAD,MAAyB,qBAAfA,EAAKC,SAAlE,GACA,OACE,kBAAC,IAAD,CACEC,UAAU,8BACVC,UAAU,kCACVC,gBAAgB,qHAEhB,yBAAKC,UAAU,aACb,kBAAC,gBAAD,KACE,yBAAKA,UAAU,eACb,2BACE,uBAAGC,KAAK,kBAAR,iBAEF,yBAAKC,IAAKC,IAAOC,IAAI,QAAQR,MAAM,UACnC,2BACE,uBAAGK,KAAK,mCACN,mDAIN,kBAAC,IAAD,CAASI,eAAe,iBACxB,kBAAC,IAAD,CAASA,eAAe,eAAeE,WAAS,GAC9C,kBAAC,IAAD,CACEF,eAAe,eACfG,KAAMjB,EACNkB,KAAK,wHAIX,kBAAC,IAAD,U,mBCxCRE,EAAOC,QAAU,8c,oJCIJC,EAAS5B,IAAO6B,IAAV,qEAAG7B,CAAH,sUAYfE,IAAM4B,YAIN5B,IAAMC,OAGND,IAAME,QAMG2B,EAAc/B,IAAO6B,IAAV,0EAAG7B,CAAH,+SAclBE,IAAM4B,YASN5B,IAAM4B,aAYCE,EAAOhC,IAAOiC,EAAV,mEAAGjC,CAAH,6xBAcTkC,IAgDFA,KCtFSN,IAjCA,SAAC,GAAoC,IAAlCR,EAAiC,EAAjCA,eAAgBG,EAAiB,EAAjBA,KAAMC,EAAW,EAAXA,KAC/BW,EAAiBC,IAAKC,SAAQ,qBAAGC,KACjC7B,QAAO,qBAAGE,QAAsBS,QADvC,GAGA,OACE,kBAAC,EAAD,KACE,kBAAC,EAAD,KACGe,EAAcI,MACf,4BACE,8BAAOnB,IAET,2BAAII,IAEN,6BACE,kBAAC,EAAD,CAAaR,KAAMO,EAAKiB,MACtB,yBAAKzB,UAAU,oBACb,yBAAKE,IAAKM,EAAKkB,IAAKtB,IAAG,UAAYI,EAAKZ,MAASA,MAAOY,EAAKZ,MAAOI,UAAU,SAC9E,6BACE,yBAAKE,IAAKyB,IAAMvB,IAAI,OAAOR,MAAM,iBACjC,6CAGJ,4BAAKY,EAAKZ,OACV,2BAAIY,EAAKoB,MACT,kBAAC,IAAD,CAAYC,WAAS,EAACC,IAAI,KAA1B","file":"component---src-pages-integrations-for-ux-designers-js-4b62d620813b6f344972.js","sourcesContent":["import React from 'react';\nimport Layout from 'layout';\nimport { GridBox } from 'pages/integrations';\nimport SideBar from 'components/marketplace/sideBar';\nimport Content from 'components/marketplace/content';\nimport styled from 'styled-components';\nimport Banner from 'components/marketplace/banner';\nimport { frontmatter } from 'data/marketplace/integrations';\nimport arrow from 'img/ui/arrow_black.svg';\nimport OwnAppSection from 'components/marketplace/ownAppSection';\nimport { media } from 'theme/breakpoints';\n\nexport const ExtendGridBox = styled(GridBox)`\n  padding-bottom: 120px;\n  margin-top: 144px;\n  grid-template-rows: auto auto;\n  grid-row-gap: 56px;\n  grid-template-areas:\n    'breadcrumbs breadcrumbs'\n    'sidebar content';\n  ${media.tablet} {\n    margin-top: 110px;\n    grid-template-columns: 1fr;\n    grid-template-rows: auto auto auto;\n    grid-template-areas:\n      'breadcrumbs'\n      'sidebar'\n      'content';\n    grid-gap: 40px;\n  }\n  ${media.mobile} {\n    grid-template-columns: calc(100vw - 30px);\n  }\n  .breadcrumbs {\n    grid-area: breadcrumbs;\n    display: flex;\n    align-items: center;\n    & img {\n      margin: 0 16px;\n    }\n    & p {\n      margin: 0;\n      line-height: normal;\n      & a {\n        color: #000;\n        font-size: 14px;\n        line-height: 24px;\n      }\n    }\n  }\n`;\n\nconst Analytics = () => {\n  const [mostPopularCard] = frontmatter.items.filter((item) => item.title === 'Google Analytics');\n  return (\n    <Layout\n      metaTitle=\"Analytics | Integrations\"\n      canonical=\"/integrations/analytics/\"\n      metaDescription=\"Connect qualitative and quantitative analytics for even more context.\"\n    >\n      <div className=\"container\">\n        <ExtendGridBox>\n          <div className=\"breadcrumbs\">\n            <p>\n              <a href=\"/integrations/\">Integrations</a>\n            </p>\n            <img src={arrow} alt=\"arrow\" title=\"Arrow\" />\n            <p>\n              <a href=\"/integrations/analytics/\">\n                <strong>Analytics</strong>\n              </a>\n            </p>\n          </div>\n          <SideBar activeCategory=\"Analytics\" underlineColor=\"#FFE478\" />\n          <Content activeCategory=\"Analytics\" hideTitle>\n            <Banner\n              activeCategory=\"Analytics\"\n              card={mostPopularCard}\n              text=\"Connect qualitative and quantitative analytics for even more context.\"\n              underlineColor=\"#FFE478\"\n            />\n          </Content>\n        </ExtendGridBox>\n        <OwnAppSection />\n      </div>\n    </Layout>\n  );\n};\n\nexport default Analytics;\n","import React from 'react';\nimport Layout from 'layout';\nimport { ExtendGridBox } from 'pages/integrations/analytics';\nimport SideBar from 'components/marketplace/sideBar';\nimport Content from 'components/marketplace/content';\nimport Banner from 'components/marketplace/banner';\nimport { frontmatter } from 'data/marketplace/integrations';\nimport arrow from 'img/ui/arrow_black.svg';\nimport OwnAppSection from 'components/marketplace/ownAppSection';\n\nconst UXDesigners = () => {\n  const [mostPopularCard] = frontmatter.items.filter((item) => item.title === 'Google Analytics');\n  return (\n    <Layout\n      metaTitle=\"UX Designers | Integrations\"\n      canonical=\"/integrations/for-ux-designers/\"\n      metaDescription=\"Find usability issues and see how the users interact with your products. Add LiveSession to your UX design stack.\"\n    >\n      <div className=\"container\">\n        <ExtendGridBox>\n          <div className=\"breadcrumbs\">\n            <p>\n              <a href=\"/integrations/\">Integrations</a>\n            </p>\n            <img src={arrow} alt=\"arrow\" title=\"Arrow\" />\n            <p>\n              <a href=\"/integrations/for-ux-designers/\">\n                <strong>UX Designers</strong>\n              </a>\n            </p>\n          </div>\n          <SideBar activeCategory=\"UX Designers\" />\n          <Content activeCategory=\"UX Designers\" hideTitle>\n            <Banner\n              activeCategory=\"UX Designers\"\n              card={mostPopularCard}\n              text=\"Find usability issues and see how the users interact with your products. Add LiveSession to your UX design stack.\"\n            />\n          </Content>\n        </ExtendGridBox>\n        <OwnAppSection />\n      </div>\n    </Layout>\n  );\n};\n\nexport default UXDesigners;\n","module.exports = \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDojMDAwMDAwO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODUgLTg1KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODUgODUpIj48cGF0aCBjbGFzcz0iYSIgZD0iTTg1LDkxLjc1aDkuMTEybC00LjIsNC4yTDkxLDk3bDYtNi02LTYtMS4wNSwxLjA1LDQuMTYyLDQuMkg4NVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NSAtODUpIi8+PC9nPjwvZz48L3N2Zz4=\"","import styled from 'styled-components';\nimport { StyledLink } from 'components/ui/link';\nimport { media } from 'theme/breakpoints';\n\nexport const Banner = styled.div`\n  background-color: #f8f8f8;\n  border-radius: 4px;\n  padding: 48px;\n  display: grid;\n  grid-template-columns: 1fr minmax(300px, 339px);\n  grid-column-gap: 50px;\n  align-items: center;\n  margin-bottom: 72px;\n  z-index: 1;\n  position: relative;\n  color: #000;\n  ${media.desktopWide} {\n    grid-template-columns: 1fr;\n    grid-gap: 52px;\n  }\n  ${media.tablet} {\n    padding: 32px;\n  }\n  ${media.mobile} {\n    width: 100vw;\n    transform: translateX(-15px);\n  }\n`;\n\nexport const MainContent = styled.div`\n  & svg {\n    width: 32px;\n    height: 32px;\n    margin-bottom: 16px;\n    & .yellow {\n      fill: #ffe478;\n    }\n    & .blue {\n      fill: #7dffef;\n    }\n    & .purple {\n      fill: #8765f9;\n    }\n    ${media.desktopWide} {\n      margin-bottom: 8px;\n    }\n  }\n  & h3 {\n    font-weight: 800;\n    font-size: 32px;\n    line-height: 44px;\n    margin-bottom: 24px;\n    ${media.desktopWide} {\n      font-size: 36px;\n      line-height: 48px;\n    }\n  }\n  & p {\n    font-size: 16px;\n    line-height: 28px;\n    margin: 0;\n  }\n`;\n\nexport const Card = styled.a`\n  border-radius: 4px;\n  background-color: #ffffff;\n  border: 2px solid #000000;\n  padding: 24px;\n  position: relative;\n  z-index: 20;\n  color: #000;\n  transition: 0.2s ease;\n  display: block;\n  &:hover {\n    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.16);\n    text-decoration: none;\n    color: #000;\n    & ${StyledLink} {\n      text-decoration: underline;\n      &::after {\n        transform: translateX(8px);\n      }\n    }\n  }\n  &:focus {\n    color: #000;\n    outline: 0;\n  }\n  & .header-container {\n    display: flex;\n    width: 100%;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    & img.logo {\n      width: 24px;\n      height: 24px;\n    }\n    & div {\n      display: flex;\n      align-items: center;\n      & img {\n        margin-right: 9px;\n        width: 12px;\n        height: 12px;\n      }\n      & p {\n        font-weight: 800;\n        font-size: 14px;\n        line-height: 24px;\n        margin: 0;\n      }\n    }\n  }\n  & h4 {\n    font-weight: 800;\n    font-size: 16px;\n    line-height: 24px;\n    margin-bottom: 8px;\n  }\n  & p {\n    font-size: 14px;\n    line-height: 24px;\n    margin-bottom: 16px;\n  }\n  & ${StyledLink} {\n    font-size: 14px;\n    margin: 0;\n  }\n`;\n","import React from 'react';\nimport CustomLink from 'components/ui/link';\nimport star from 'img/ui/starBanner.svg';\nimport PropTypes from 'prop-types';\nimport { data } from 'data/marketplace/sidebar';\nimport * as Styled from './styled';\n\nconst Banner = ({ activeCategory, card, text }) => {\n  const [getCurrentCat] = data.flatMap(({ list }) =>\n    list.filter(({ title }) => title === activeCategory),\n  );\n  return (\n    <Styled.Banner>\n      <Styled.MainContent>\n        {getCurrentCat.image}\n        <h3>\n          <span>{activeCategory}</span>\n        </h3>\n        <p>{text}</p>\n      </Styled.MainContent>\n      <div>\n        <Styled.Card href={card.link}>\n          <div className=\"header-container\">\n            <img src={card.img} alt={`Logo - ${card.title}`} title={card.title} className=\"logo\" />\n            <div>\n              <img src={star} alt=\"Star\" title=\"Most popular\" />\n              <p>Most popular</p>\n            </div>\n          </div>\n          <h4>{card.title}</h4>\n          <p>{card.desc}</p>\n          <CustomLink withArrow tag=\"p\">\n            Learn more\n          </CustomLink>\n        </Styled.Card>\n      </div>\n    </Styled.Banner>\n  );\n};\n\nexport default Banner;\n\nBanner.propTypes = {\n  card: PropTypes.oneOfType([PropTypes.object]).isRequired,\n  text: PropTypes.string.isRequired,\n  activeCategory: PropTypes.string.isRequired,\n};\n"],"sourceRoot":""}