{"version":3,"sources":["webpack:///./src/img/usability-testing/cover/usabilityTesting.svg","webpack:///./src/img/user-experience/cover/userexperience.svg","webpack:///./src/img/heatmaps/cover/heatmaps.png","webpack:///./src/img/usability-testing/cover/usabilityTesting1.svg","webpack:///./src/pages/resources/guides.js"],"names":["module","exports","Section","styled","section","props","secondary","media","desktopWide","mobile","Header","tablet","SubTitle","p","Chapters","div","Guides","metaTitle","metaDescription","canonical","className","srcSet","guidesUsabilityMobile","src","guidesUsability","alt","title","href","withArrow","usabilityTestingData","map","desc","url","key","guidesUserMobile","guidesUser","userExperienceData","heatmapsMobile","heatmaps","heatmapsData"],"mappings":"kFAAAA,EAAOC,QAAU,IAA0B,gE,qBCA3CD,EAAOC,QAAU,IAA0B,8D,qBCA3CD,EAAOC,QAAU,IAA0B,wD,qBCA3CD,EAAOC,QAAU,IAA0B,iE,kCCA3C,8PAgBMC,EAAUC,IAAOC,QAAV,qEAAGD,CAAH,8WAWI,SAACE,GAAD,OAAYA,EAAMC,UAAY,gBAAkB,SAE7DC,IAAMC,YAWND,IAAME,QAMJC,EAASP,IAAOC,QAAV,oEAAGD,CAAH,iJAIRI,IAAMC,YAGND,IAAMI,OASNJ,IAAME,QAKJG,EAAWT,IAAOU,EAAV,sEAAGV,CAAH,0JAMVI,IAAME,QAQJK,EAAWX,IAAOY,IAAV,sEAAGZ,CAAH,wjBAiBRI,IAAMC,YAGND,IAAMI,QAkIGK,UAnGA,WACb,OACE,kBAAC,IAAD,CACEC,UAAU,8BACVC,gBAAgB,0HAChBC,UAAU,sBAEV,yBAAKC,UAAU,aACb,kBAACV,EAAD,KACE,wBAAIU,UAAU,QAAd,yBACwB,qDAExB,kBAACR,EAAD,mJAKF,kBAACV,EAAD,KACE,iCACE,4BAAQK,MAAM,qBAAqBc,OAAQC,MAC3C,yBACEC,IAAKC,IACLC,IAAI,eACJC,MAAM,oBACNN,UAAU,eAGd,kBAACN,EAAD,KACE,iDACA,kBAAC,IAAD,CAAYa,KAAK,sBAAsBP,UAAU,kBAAkBQ,WAAS,GAA5E,kBAGA,4BACGC,IAAqBC,KAAI,gBAAGC,EAAH,EAAGA,KAAML,EAAT,EAASA,MAAOM,EAAhB,EAAgBA,IAAhB,OACxB,wBAAIC,IAAKD,GACP,kBAAC,IAAD,CAAYL,KAAMK,GAChB,8BAAON,GACP,2BAAIK,WAOhB,kBAAC7B,EAAD,CAASI,WAAS,GAChB,iCACE,4BAAQC,MAAM,qBAAqBc,OAAQa,MAC3C,yBACEX,IAAKY,IACLV,IAAI,eACJC,MAAM,kBACNN,UAAU,eAGd,kBAACN,EAAD,KACE,+CACA,kBAAC,IAAD,CAAYa,KAAK,oBAAoBP,UAAU,kBAAkBQ,WAAS,GAA1E,kBAGA,4BACGQ,IAAmBN,KAAI,gBAAGC,EAAH,EAAGA,KAAML,EAAT,EAASA,MAAOM,EAAhB,EAAgBA,IAAhB,OACtB,wBAAIC,IAAKD,GACP,kBAAC,IAAD,CAAYL,KAAMK,GAChB,8BAAON,GACP,2BAAIK,WAOhB,kBAAC7B,EAAD,KACE,iCACE,4BAAQK,MAAM,qBAAqBc,OAAQgB,MAC3C,yBAAKd,IAAKe,IAAUb,IAAI,eAAeC,MAAM,WAAWN,UAAU,eAEpE,kBAACN,EAAD,KACE,wCACA,kBAAC,IAAD,CAAYa,KAAK,aAAaP,UAAU,kBAAkBQ,WAAS,GAAnE,kBAGA,4BACGW,IAAaT,KAAI,gBAAGC,EAAH,EAAGA,KAAML,EAAT,EAASA,MAAOM,EAAhB,EAAgBA,IAAhB,OAChB,wBAAIC,IAAKD,GACP,kBAAC,IAAD,CAAYL,KAAMK,GAChB,8BAAON,GACP,2BAAIK,YAQlB,kBAAC,IAAD","file":"component---src-pages-resources-guides-js-5357453edc0ca191b1e3.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/usabilityTesting-e125390087d577a38ed702e373821138.svg\";","module.exports = __webpack_public_path__ + \"static/userexperience-31cb5d459c15ad68127f8f9481f98fa1.svg\";","module.exports = __webpack_public_path__ + \"static/heatmaps-f44481cf6f69dbd7ef2de7f97aea124e.png\";","module.exports = __webpack_public_path__ + \"static/usabilityTesting1-b1e2b6bf0d56037283ef796ba953fa52.svg\";","import React from 'react';\nimport Layout from 'layout';\nimport styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\nimport { data as usabilityTestingData } from 'data/guides/usability-testing';\nimport { data as userExperienceData } from 'data/guides/user-experience';\nimport { data as heatmapsData } from 'data/guides/heatmaps';\nimport StartUsing from 'components/ui/startUsing';\nimport guidesUsability from 'img/usability-testing/cover/usabilityTesting.svg';\nimport guidesUsabilityMobile from 'img/usability-testing/cover/usabilityTesting1.svg';\nimport guidesUser from 'img/user-experience/cover/userexperience.svg';\nimport guidesUserMobile from 'img/user-experience/cover/userexperience1.png';\nimport heatmaps from 'img/heatmaps/cover/heatmaps.png';\nimport heatmapsMobile from 'img/heatmaps/cover/heatmaps1.png';\nimport CustomLink from 'components/ui/link';\n\nconst Section = styled.section`\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-column-gap: 40px;\n  align-items: center;\n  padding-bottom: 50px;\n  padding-top: 88px;\n  & img {\n    border-radius: 4px;\n  }\n  & picture {\n    grid-area: ${(props) => (props.secondary ? '1 / 3 / 2 / 2' : 'auto')};\n  }\n  ${media.desktopWide} {\n    grid-template-columns: repeat(1, 1fr);\n    grid-template-rows: repeat(1, min-content);\n    grid-row-gap: 80px;\n    & img {\n      width: 100%;\n    }\n    & picture {\n      grid-area: auto;\n    }\n  }\n  ${media.mobile} {\n    padding-top: 40px;\n    grid-row-gap: 40px;\n  }\n`;\n\nconst Header = styled.section`\n  margin-top: 5rem;\n  text-align: center;\n  padding-bottom: 0;\n  ${media.desktopWide} {\n    margin-top: 3rem;\n  }\n  ${media.tablet} {\n    & h1.line {\n      & span {\n        &::after {\n          display: none;\n        }\n      }\n    }\n  }\n  ${media.mobile} {\n    margin-top: 1rem;\n  }\n`;\n\nconst SubTitle = styled.p`\n  font-size: 22px;\n  line-height: 34px;\n  margin-top: 32px;\n  max-width: 85%;\n  margin: 32px auto 0;\n  ${media.mobile} {\n    margin-top: 24px;\n    font-size: 20px;\n    line-height: 30px;\n    max-width: 100%;\n  }\n`;\n\nconst Chapters = styled.div`\n  & h2 {\n    margin-bottom: 24px;\n  }\n  & .arrow-paragraph {\n    margin-bottom: 32px;\n  }\n  & ul {\n    list-style: none;\n    padding: 32px 0 0;\n    margin: 0;\n    border-top: 1px solid #e4e5e8;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    grid-template-rows: repeat(4, auto);\n    grid-column-gap: 28px;\n    grid-row-gap: 24px;\n    ${media.desktopWide} {\n      grid-column-gap: 46px;\n    }\n    ${media.tablet} {\n      grid-gap: 24px;\n    }\n    & li {\n      & a {\n        color: #000;\n        &:hover {\n          color: #000;\n          text-decoration: none;\n          & p {\n            text-decoration: underline;\n          }\n        }\n        & span {\n          font-size: 12px;\n          line-height: 20px;\n          color: #808080;\n          margin-bottom: 6px;\n          text-transform: uppercase;\n        }\n        & p {\n          font-size: 16px;\n          line-height: 26px;\n          margin-bottom: 0;\n          color: #000;\n        }\n      }\n    }\n  }\n`;\n\nconst Guides = () => {\n  return (\n    <Layout\n      metaTitle=\"Guides | Grow Your Business\"\n      metaDescription=\"Learn and grow with LiveSession. Read our guides to usability testing, user experience, qualitative analytics and more.\"\n      canonical=\"/resources/guides/\"\n    >\n      <div className=\"container\">\n        <Header>\n          <h1 className=\"line\">\n            LiveSession guides to <span>grow your business</span>\n          </h1>\n          <SubTitle>\n            We have many years of experience in business development from many areas, so we decided\n            to share our knowledge to help your company grow.\n          </SubTitle>\n        </Header>\n        <Section>\n          <picture>\n            <source media=\"(max-width:1200px)\" srcSet={guidesUsabilityMobile} />\n            <img\n              src={guidesUsability}\n              alt=\"Guides cover\"\n              title=\"Usability Testing\"\n              className=\"img-fluid\"\n            />\n          </picture>\n          <Chapters>\n            <h2>Usability testing</h2>\n            <CustomLink href=\"/usability-testing/\" className=\"arrow-paragraph\" withArrow>\n              Read the guide\n            </CustomLink>\n            <ul>\n              {usabilityTestingData.map(({ desc, title, url }) => (\n                <li key={url}>\n                  <CustomLink href={url}>\n                    <span>{title}</span>\n                    <p>{desc}</p>\n                  </CustomLink>\n                </li>\n              ))}\n            </ul>\n          </Chapters>\n        </Section>\n        <Section secondary>\n          <picture>\n            <source media=\"(max-width:1200px)\" srcSet={guidesUserMobile} />\n            <img\n              src={guidesUser}\n              alt=\"Guides cover\"\n              title=\"User Experience\"\n              className=\"img-fluid\"\n            />\n          </picture>\n          <Chapters>\n            <h2>User experience</h2>\n            <CustomLink href=\"/user-experience/\" className=\"arrow-paragraph\" withArrow>\n              Read the guide\n            </CustomLink>\n            <ul>\n              {userExperienceData.map(({ desc, title, url }) => (\n                <li key={url}>\n                  <CustomLink href={url}>\n                    <span>{title}</span>\n                    <p>{desc}</p>\n                  </CustomLink>\n                </li>\n              ))}\n            </ul>\n          </Chapters>\n        </Section>\n        <Section>\n          <picture>\n            <source media=\"(max-width:1200px)\" srcSet={heatmapsMobile} />\n            <img src={heatmaps} alt=\"Guides cover\" title=\"Heatmaps\" className=\"img-fluid\" />\n          </picture>\n          <Chapters>\n            <h2>Heatmaps</h2>\n            <CustomLink href=\"/heatmaps/\" className=\"arrow-paragraph\" withArrow>\n              Read the guide\n            </CustomLink>\n            <ul>\n              {heatmapsData.map(({ desc, title, url }) => (\n                <li key={url}>\n                  <CustomLink href={url}>\n                    <span>{title}</span>\n                    <p>{desc}</p>\n                  </CustomLink>\n                </li>\n              ))}\n            </ul>\n          </Chapters>\n        </Section>\n      </div>\n      <StartUsing />\n    </Layout>\n  );\n};\n\nexport default Guides;\n"],"sourceRoot":""}