{"version":3,"sources":["webpack:///./src/templates/newsletter.js","webpack:///./src/pages/newsletters/february-2021.js"],"names":["StyledSection","styled","section","media","mobile","arrow","ArrowButton","button","tablet","Content","props","link","title","description","page","useStaticQuery","allJavascriptFrontmatter","edges","filter","post","node","frontmatter","canonical","metaTitle","metaDescription","hideFooter","hideHeader","content","previous","placement","onClick","navigate","disabled","className","src","alt","next","width","border","cellPadding","cellSpacing","bgcolor","style","padding","display","margin","maxWidth","height","align","textAlign","fontSize","lineHeight","opacity","Date","getFullYear","href","textDecoration","Newsletter","NewsletterTemplate","customEvents","userJourney","coverSegments","remoteUX","ecommerceUX","role","aria-label","target","rel","fluid","childImageSharp","outline","borderRadius","color","marginTop","fontWeight","marginBottom","backgroundColor","borderTop","verticalAlign","paddingLeft","date"],"mappings":"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","file":"component---src-pages-newsletters-february-2021-js-da6e79139f2b07e5b025.js","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { graphql, useStaticQuery, navigate } from 'gatsby';\nimport { media } from 'theme/breakpoints';\nimport Layout from 'layout';\nimport arrow from 'img/ui/icon_arrow.svg';\nimport Tippy from '@tippyjs/react';\n\nconst StyledSection = styled.section`\n  background-color: #f1f5f9;\n  padding: 4rem 0;\n  ${media.mobile} {\n    padding: 2rem 0;\n  }\n  a {\n    text-decoration: none;\n    color: #0a4ed6;\n    &.with-arrow {\n      position: relative;\n      display: inline-block;\n      font-weight: 800;\n\n      &::after {\n        content: '';\n        background-image: url(${arrow});\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: contain;\n        display: inline-block;\n        clear: both;\n        margin-left: 16px;\n        width: 12px;\n        height: 12px;\n      }\n    }\n  }\n  p {\n    font-size: 16px;\n    line-height: 24px;\n    & a {\n      display: inline;\n    }\n  }\n  body {\n    font-family: 'Muli', sans-serif;\n    width: 100%;\n    color: #000;\n    background-color: #f1f5f9;\n  }\n  strong {\n    font-weight: 800;\n  }\n  h1 {\n    font-size: 30px;\n    line-height: 38px;\n    font-weight: 300;\n  }\n  h1 span {\n    font-weight: 800;\n  }\n  .logo {\n    display: block;\n    margin: 0 auto 40px;\n    max-width: 140px;\n    height: 21px;\n  }\n  .head {\n    display: block;\n    margin: 0 auto;\n    max-width: 100%;\n  }\n  .hero-img {\n    padding: 0 0 24px !important;\n  }\n  .text {\n    width: 100%;\n  }\n  .content {\n    max-width: 600px;\n    margin: 0 auto;\n    background-color: #fff;\n  }\n  .go-to-app {\n    font-size: 16px;\n    color: #fff;\n  }\n  .logo-bottom {\n    display: block;\n    margin: 40px auto 0;\n    max-width: 104px;\n    height: 16px;\n  }\n  .credits {\n    opacity: 0.5;\n    font-size: 14px;\n    line-height: 28px;\n    margin: 32px 0;\n    text-align: center;\n    width: 100%;\n  }\n  .bottom-info {\n    width: 100%;\n    text-align: center;\n  }\n  .bottom-info a {\n    margin: 0 16px;\n  }\n  .bottom-info a img {\n    width: 40px;\n  }\n  .divider {\n    width: 100%;\n    height: 1px;\n    background-color: #ddd;\n  }\n  .info {\n    margin: 0;\n    text-align: left;\n    font-weight: 400;\n    line-height: 140%;\n    font-size: 16px;\n  }\n`;\n\nconst ArrowButton = styled.button`\n  border: 2px solid #0a4ed6;\n  border-radius: 50%;\n  height: 50px;\n  width: 50px;\n  background-color: transparent;\n  position: fixed;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: background-color 0.2 ease;\n  z-index: 50;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  &:disabled {\n    opacity: 0.5;\n  }\n  &:disabled:hover {\n    background-color: transparent;\n  }\n  &:hover {\n    background-color: #fff;\n  }\n  &.right {\n    right: 40px;\n  }\n  &.left {\n    left: 40px;\n    & img {\n      transform: rotate(180deg);\n    }\n  }\n  ${media.tablet} {\n    height: 30px;\n    width: 30px;\n    top: 40px;\n    min-width: 30px;\n    min-height: 30px;\n    &.left {\n      left: 30px;\n    }\n    &.right {\n      right: 30px;\n    }\n  }\n`;\n\nexport default (Content) => (props) => {\n  // eslint-disable-next-line react/prop-types\n  const { link, title, description } = props;\n  const {\n    allJavascriptFrontmatter: { edges },\n  } = useStaticQuery(graphql`\n    query SitePaths {\n      allJavascriptFrontmatter(\n        filter: { frontmatter: { link: { regex: \"/newsletters/\" } } }\n        sort: { fields: frontmatter___date, order: DESC }\n      ) {\n        edges {\n          node {\n            frontmatter {\n              link\n              title\n            }\n          }\n          next {\n            frontmatter {\n              link\n              title\n            }\n          }\n          previous {\n            frontmatter {\n              link\n              title\n            }\n          }\n        }\n      }\n    }\n  `);\n  const [page] = edges.filter((post) => post.node.frontmatter.link === link);\n  return (\n    <Layout canonical={link} metaTitle={title} metaDescription={description} hideFooter hideHeader>\n      <Tippy content={page.previous !== null && page.previous.frontmatter.title} placement=\"right\">\n        <ArrowButton\n          onClick={() =>\n            navigate(\n              page.previous !== null ? page.previous.frontmatter.link : page.node.frontmatter.link,\n            )\n          }\n          disabled={page.previous === null}\n          className=\"left\"\n        >\n          <img src={arrow} alt=\"left arrow\" title=\"arrow\" />\n        </ArrowButton>\n      </Tippy>\n      <Tippy content={page.next !== null && page.next.frontmatter.title} placement=\"left\">\n        <ArrowButton\n          onClick={() =>\n            navigate(page.next !== null ? page.next.frontmatter.link : page.node.frontmatter.link)\n          }\n          className=\"right\"\n          disabled={page.next === null}\n        >\n          <img src={arrow} alt=\"right arrow\" title=\"arrow\" />\n        </ArrowButton>\n      </Tippy>\n      <StyledSection>\n        <table width=\"100%\" border=\"0\" cellPadding=\"0\" cellSpacing=\"0\">\n          <tbody>\n            <tr>\n              <td bgcolor=\"#F1F5F9\" style={{ padding: '40px 16px' }}>\n                <img\n                  src=\"https://emails.livesession.io/logo-new.png\"\n                  className=\"logo\"\n                  style={{\n                    display: 'block',\n                    margin: '0 auto 40px',\n                    maxWidth: '150px',\n                    height: '21px',\n                  }}\n                  alt=\"Logo small\"\n                  title=\"LiveSession Logo\"\n                />\n                <Content {...props} />\n                <table\n                  className=\"bottom-info\"\n                  cellSpacing=\"0\"\n                  cellPadding=\"0\"\n                  align=\"center\"\n                  width=\"100%\"\n                  style={{ width: '100%', textAlign: 'center' }}\n                >\n                  <tbody>\n                    <tr>\n                      <td>\n                        <img\n                          src=\"https://emails.livesession.io/logo-new.png\"\n                          className=\"logo-bottom\"\n                          style={{\n                            display: 'block',\n                            margin: '40px auto 0',\n                            maxWidth: '104px',\n                            height: '16px',\n                          }}\n                          alt=\"Logo big\"\n                          title=\"LiveSession Logo\"\n                        />\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>\n                        <p\n                          className=\"credits\"\n                          style={{\n                            fontSize: '14px',\n                            lineHeight: '28px',\n                            opacity: 0.5,\n                            margin: '32px 0',\n                            textAlign: 'center',\n                            width: '100%',\n                          }}\n                        >\n                          &copy; {new Date().getFullYear()} LiveSession. All rights reserved. <br />\n                          LiveSession Sp. z o.o. Sikorskiego 3/2, Wroclaw, Poland\n                        </p>\n                      </td>\n                    </tr>\n                    <tr>\n                      <td>\n                        <a\n                          href=\"https://twitter.com/livesessionhq\"\n                          style={{ textDecoration: 'none', margin: '0 16px' }}\n                        >\n                          <img\n                            src=\"https://emails.livesession.io/twitter-logo.png\"\n                            style={{ width: '40px' }}\n                            alt=\"twitter\"\n                            title=\"LiveSession's Twitter\"\n                          />\n                        </a>\n                        <a\n                          href=\"https://www.facebook.com/LiveSessionIO/\"\n                          style={{ textDecoration: 'none', margin: '0 16px' }}\n                        >\n                          <img\n                            src=\"https://emails.livesession.io/fb-logo.png\"\n                            style={{ width: '40px' }}\n                            alt=\"facebook\"\n                            title=\"LiveSession's Facebook\"\n                          />\n                        </a>\n                        <a\n                          href=\"https://www.linkedin.com/company/livesession/\"\n                          style={{ textDecoration: 'none', margin: '0 16px' }}\n                        >\n                          <img\n                            src=\"https://emails.livesession.io/linkedin-logo.png\"\n                            style={{ width: '40px' }}\n                            alt=\"linkedIn\"\n                            title=\"LiveSession's LinkedIn\"\n                          />\n                        </a>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </StyledSection>\n    </Layout>\n  );\n};\n","import React from 'react';\nimport NewsletterTemplate from 'templates/newsletter';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport Img from 'gatsby-image';\n\nconst Content = () => {\n  const { customEvents, userJourney, coverSegments, remoteUX, ecommerceUX } =\n    useStaticQuery(graphql`\n      query {\n        customEvents: file(relativePath: { eq: \"blog/custom-events/custom-events1.png\" }) {\n          childImageSharp {\n            fluid(quality: 95) {\n              ...GatsbyImageSharpFluid_withWebp\n            }\n          }\n        }\n        userJourney: file(relativePath: { eq: \"blog/user-journey/img1.png\" }) {\n          childImageSharp {\n            fluid(quality: 95) {\n              ...GatsbyImageSharpFluid_withWebp\n            }\n          }\n        }\n        coverSegments: file(relativePath: { eq: \"blog/covers/segment-notifications.png\" }) {\n          childImageSharp {\n            fluid(quality: 95) {\n              ...GatsbyImageSharpFluid_withWebp\n            }\n          }\n        }\n        remoteUX: file(relativePath: { eq: \"blog/covers/remote-ux.png\" }) {\n          childImageSharp {\n            fluid(quality: 95) {\n              ...GatsbyImageSharpFluid_withWebp\n            }\n          }\n        }\n        ecommerceUX: file(relativePath: { eq: \"blog/covers/ecommerce-ux.png\" }) {\n          childImageSharp {\n            fluid(quality: 95) {\n              ...GatsbyImageSharpFluid_withWebp\n            }\n          }\n        }\n      }\n    `);\n\n  return (\n    <table className=\"content\" cellSpacing=\"0\" cellPadding=\"0\" align=\"center\" width=\"100%\">\n      <tbody>\n        <tr>\n          <td>\n            <table className=\"text\" cellSpacing=\"0\" cellPadding=\"0\" style={{ width: '100%' }}>\n              <tbody>\n                <tr>\n                  <td style={{ padding: '40px 40px 24px' }}>\n                    <p style={{ margin: 0 }}>\n                      Hi{' '}\n                      <span role=\"img\" aria-label=\"emoji\">\n                        &#128075;\n                      </span>\n                      <br />\n                      <br />\n                      You are probably wondering what’s going on with us. Well, not gonna lie, we’ve\n                      been swamped these days, but managed to deliver:\n                    </p>\n                  </td>\n                </tr>\n                <tr>\n                  <td style={{ padding: '0 40px' }}>\n                    <h2 style={{ margin: 0, fontSize: '22px', lineHeight: 'normal' }}>\n                      Custom events\n                    </h2>\n                  </td>\n                </tr>\n                <tr>\n                  <td style={{ padding: '32px 40px 12px' }}>\n                    <table>\n                      <tbody>\n                        <tr>\n                          <td>\n                            <a\n                              href=\"/blog/custom-events/\"\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              style={{ display: 'block' }}\n                            >\n                              <Img\n                                fluid={customEvents.childImageSharp.fluid}\n                                alt=\"Product update - Custom Events\"\n                                style={{\n                                  border: 0,\n                                  lineHeight: '100%',\n                                  outline: 0,\n                                  display: 'block',\n                                  height: 'auto',\n                                  borderRadius: '6px',\n                                  maxWidth: '100%',\n                                }}\n                              />\n                            </a>\n                          </td>\n                        </tr>\n                        <tr>\n                          <td>\n                            <p\n                              style={{\n                                color: '#000',\n                                fontSize: 16,\n                                marginTop: 24,\n                                display: 'block',\n                              }}\n                            >\n                              <strong>It’s finally here!</strong> Last year we implemented Custom\n                              Events, something many of you were waiting for. Now you can gather\n                              even more meaningful data, fully tailored for your business needs.\n                              Using Custom Events, you can enrich every session replay with\n                              information about:\n                            </p>\n                            <p\n                              style={{\n                                color: '#000',\n                                fontSize: 16,\n                                marginTop: 8,\n                                display: 'block',\n                              }}\n                            >\n                              your customers’ <strong>order value</strong>{' '}\n                              <span role=\"img\" aria-label=\"emoji\">\n                                💰\n                              </span>{' '}\n                              <br />\n                              what product did the user <strong>add to the cart</strong>{' '}\n                              <span role=\"img\" aria-label=\"emoji\">\n                                🛒\n                              </span>{' '}\n                              <br />\n                              which{' '}\n                              <strong>product’s variant was the customer interested in</strong>{' '}\n                              <span role=\"img\" aria-label=\"emoji\">\n                                🔘\n                              </span>{' '}\n                              <br />\n                            </p>\n                            <a\n                              href=\"/help/how-do-the-custom-events-work/\"\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              className=\"with-arrow\"\n                              style={{\n                                fontSize: '16px',\n                                color: '#0446CA',\n                                fontWeight: 700,\n                                textDecoration: 'none',\n                                marginTop: 8,\n                                display: 'block',\n                              }}\n                            >\n                              Learn more about how our Custom Events work\n                            </a>\n                          </td>\n                        </tr>\n                      </tbody>\n                    </table>\n                  </td>\n                </tr>\n\n                <tr>\n                  <td style={{ padding: '34px 40px 0 ' }}>\n                    <h2 style={{ margin: 0, fontSize: '22px', lineHeight: 'normal' }}>\n                      User journey\n                    </h2>\n                  </td>\n                </tr>\n                <tr>\n                  <td style={{ padding: '0 40px' }}>\n                    <p\n                      style={{\n                        color: '#000',\n                        fontSize: 16,\n                        marginTop: 24,\n                        display: 'block',\n                        marginBottom: 0,\n                      }}\n                    >\n                      Want to know the user’s most essential actions during the session? Now it’s\n                      even easier with our User journey feature! You will find it by hovering on the\n                      “pages” link:\n                    </p>\n                  </td>\n                </tr>\n                <tr>\n                  <td style={{ padding: '28px 40px 12px' }}>\n                    <table>\n                      <tbody>\n                        <tr>\n                          <td>\n                            <a\n                              href=\"/blog/user-journey/\"\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              style={{ display: 'block' }}\n                            >\n                              <Img\n                                fluid={userJourney.childImageSharp.fluid}\n                                alt=\"Product update - User journey\"\n                                style={{\n                                  border: 0,\n                                  lineHeight: '100%',\n                                  outline: 0,\n                                  display: 'block',\n                                  height: 'auto',\n                                  borderRadius: '6px',\n                                  maxWidth: '100%',\n                                }}\n                              />\n                            </a>\n                          </td>\n                        </tr>\n                        <tr>\n                          <td>\n                            <p\n                              style={{\n                                color: '#000',\n                                fontSize: 16,\n                                marginTop: 8,\n                                display: 'block',\n                                marginBottom: 0,\n                              }}\n                            >\n                              You can get a sneak peek at the user’s activity straight from the\n                              Sessions tab and fast forward to the event you are the most interested\n                              in.\n                            </p>\n                          </td>\n                        </tr>\n                        <tr>\n                          <td style={{ padding: '28px 40px' }}>\n                            <a\n                              href=\"https://app.livesession.io/\"\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              className=\"go-to-app\"\n                              style={{\n                                display: 'block',\n                                margin: '0 auto',\n                                backgroundColor: '#0a4ed6',\n                                padding: '10px 0',\n                                fontWeight: 700,\n                                color: '#fff',\n                                borderRadius: '4px',\n                                width: '188px',\n                                textAlign: 'center',\n                              }}\n                            >\n                              Log in to LiveSession\n                            </a>\n                          </td>\n                        </tr>\n                      </tbody>\n                    </table>\n                  </td>\n                </tr>\n\n                <tr>\n                  <td style={{ padding: '0 40px' }}>\n                    <h2 style={{ margin: 0, fontSize: '22px', lineHeight: 'normal' }}>\n                      Segments summary email\n                    </h2>\n                  </td>\n                </tr>\n                <tr>\n                  <td style={{ padding: '0 40px' }}>\n                    <p\n                      style={{\n                        color: '#000',\n                        fontSize: 16,\n                        marginTop: 24,\n                        display: 'block',\n                        marginBottom: 0,\n                      }}\n                    >\n                      You do like our daily summary emails, don’t you? Now you can get an update on\n                      what has changed in any particular segment. Just hit the “Add to summary”\n                      button while the segment is selected, and you’re good to go:\n                    </p>\n                  </td>\n                </tr>\n\n                <tr>\n                  <td style={{ padding: '32px 40px 12px' }}>\n                    <table style={{ width: '100%' }}>\n                      <tbody>\n                        <tr>\n                          <td>\n                            <a\n                              href=\"/blog/segments-summary-email/\"\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              style={{ display: 'block' }}\n                            >\n                              <Img\n                                fluid={coverSegments.childImageSharp.fluid}\n                                alt=\"Product update - Segments summary email\"\n                                style={{\n                                  border: 0,\n                                  lineHeight: '100%',\n                                  outline: 0,\n                                  display: 'block',\n                                  height: 'auto',\n                                  borderRadius: '6px',\n                                  maxWidth: '100%',\n                                }}\n                              />\n                            </a>\n                          </td>\n                        </tr>\n                        <tr>\n                          <td style={{ padding: '24px 0 12px' }}>\n                            <a\n                              href=\"https://app.livesession.io/app/settings/notifications\"\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              className=\"with-arrow\"\n                              style={{\n                                fontSize: '16px',\n                                color: '#0446CA',\n                                fontWeight: 700,\n                                textDecoration: 'none',\n                                marginTop: 12,\n                                display: 'block',\n                              }}\n                            >\n                              Set up segments summary\n                            </a>\n                          </td>\n                        </tr>\n                      </tbody>\n                    </table>\n                  </td>\n                </tr>\n                <tr>\n                  <td style={{ padding: '12px 0 34px' }}>\n                    <div style={{ borderTop: '1px solid #ddd' }} />\n                  </td>\n                </tr>\n                <tr>\n                  <td style={{ padding: '12px 40px 12px' }}>\n                    <h2 style={{ margin: 0, fontSize: 22, lineHeight: 'normal' }}>\n                      <span>New on our blog</span>\n                    </h2>\n                  </td>\n                </tr>\n\n                <tr>\n                  <td style={{ padding: '32px 40px 12px' }}>\n                    <table>\n                      <tbody>\n                        <tr>\n                          <td>\n                            <a\n                              href=\"/blog/4-ways-to-improve-ecommerce-ux-for-website-visitors/\"\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              style={{ display: 'block' }}\n                            >\n                              <Img\n                                fluid={ecommerceUX.childImageSharp.fluid}\n                                alt=\"Blog post - 4 Ways To Improve eCommerce UX For Website Visitors\"\n                                style={{\n                                  border: 0,\n                                  lineHeight: '100%',\n                                  outline: 0,\n                                  display: 'block',\n                                  height: 'auto',\n                                  borderRadius: '6px',\n                                  maxWidth: '100%',\n                                }}\n                              />\n                            </a>\n                          </td>\n                        </tr>\n                        <tr>\n                          <td>\n                            <a\n                              href=\"/blog/4-ways-to-improve-ecommerce-ux-for-website-visitors/\"\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              style={{\n                                textDecoration: 'none',\n                                color: '#061631',\n                                fontWeight: 800,\n                                marginTop: '24px',\n                                display: 'block',\n                              }}\n                            >\n                              4 Ways To Improve eCommerce UX For Website Visitors\n                            </a>\n                            <p\n                              style={{\n                                color: '#9b9b9b',\n                                fontSize: 16,\n                                marginTop: 8,\n                                display: 'block',\n                              }}\n                            >\n                              When it comes to customers shopping online, they want a similar feel\n                              to a physical brick and mortar store. Whether they’re looking for a\n                              particular item, or want to buy anything at all, only they have the\n                              buying power. Therefore, their buying experience should be as\n                              seamlessly as possible.\n                            </p>\n\n                            <a\n                              href=\"/blog/4-ways-to-improve-ecommerce-ux-for-website-visitors/\"\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              className=\"with-arrow\"\n                              style={{\n                                fontSize: '16px',\n                                color: '#0446CA',\n                                fontWeight: 700,\n                                textDecoration: 'none',\n                                marginTop: 8,\n                                display: 'block',\n                              }}\n                            >\n                              Read more on our blog\n                            </a>\n                          </td>\n                        </tr>\n                      </tbody>\n                    </table>\n                  </td>\n                </tr>\n\n                <tr>\n                  <td style={{ padding: '32px 40px 12px' }}>\n                    <table>\n                      <tbody>\n                        <tr>\n                          <td>\n                            <a\n                              href=\"/blog/5-tips-to-create-best-ux-in-the-remote-work-culture/\"\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              style={{ display: 'block' }}\n                            >\n                              <Img\n                                fluid={remoteUX.childImageSharp.fluid}\n                                alt=\"Blog post - 5 tips to create the best UX in the remote work culture\"\n                                style={{\n                                  border: 0,\n                                  lineHeight: '100%',\n                                  outline: 0,\n                                  display: 'block',\n                                  height: 'auto',\n                                  borderRadius: '6px',\n                                  maxWidth: '100%',\n                                }}\n                              />\n                            </a>\n                          </td>\n                        </tr>\n                        <tr>\n                          <td>\n                            <a\n                              href=\"/blog/5-tips-to-create-best-ux-in-the-remote-work-culture/\"\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              style={{\n                                textDecoration: 'none',\n                                color: '#061631',\n                                fontWeight: 800,\n                                marginTop: '24px',\n                                display: 'block',\n                              }}\n                            >\n                              5 tips to create the best UX in the remote work culture\n                            </a>\n                            <p\n                              style={{\n                                color: '#9b9b9b',\n                                fontSize: 16,\n                                marginTop: 8,\n                                display: 'block',\n                              }}\n                            >\n                              Living in a fast-changing world, the COVID-19 pandemic has added many\n                              changes in the business world. Many companies have shifted their focus\n                              to work from home (the new normal), which has its own merits and\n                              demerits.\n                            </p>\n\n                            <a\n                              href=\"/blog/5-tips-to-create-best-ux-in-the-remote-work-culture/\"\n                              target=\"_blank\"\n                              rel=\"noopener noreferrer\"\n                              className=\"with-arrow\"\n                              style={{\n                                fontSize: '16px',\n                                color: '#0446CA',\n                                fontWeight: 700,\n                                textDecoration: 'none',\n                                marginTop: 8,\n                                display: 'block',\n                              }}\n                            >\n                              Read more on our blog\n                            </a>\n                          </td>\n                        </tr>\n                      </tbody>\n                    </table>\n                  </td>\n                </tr>\n\n                <tr>\n                  <td style={{ padding: '0 40px' }}>\n                    <p\n                      style={{\n                        color: '#000',\n                        fontSize: 16,\n                        marginTop: 24,\n                        display: 'block',\n                        marginBottom: 0,\n                      }}\n                    >\n                      Want to know more? Feel free to contact us by replying to this email. Follow\n                      us on Facebook, Twitter and LinkedIn to be one of the first to know what’s\n                      happening!\n                    </p>\n                  </td>\n                </tr>\n\n                <tr>\n                  <td style={{ padding: '40px 60px 15px 40px' }}>\n                    <p style={{ margin: 0, fontSize: '16px', lineHeight: '24px' }}>Best,</p>\n                  </td>\n                </tr>\n                <tr>\n                  <td style={{ padding: '15px 40px 32px' }}>\n                    <table className=\"kamil\" cellSpacing=\"0\" cellPadding=\"0\">\n                      <tbody>\n                        <tr style={{ verticalAlign: 'middle' }}>\n                          <th>\n                            <img\n                              src=\"https://emails.livesession.io/pete_rounded.png\"\n                              className=\"kamil-img\"\n                              style={{ maxWidth: '56px' }}\n                              alt=\"kamil\"\n                            />\n                          </th>\n                          <th style={{ paddingLeft: '16px' }}>\n                            <p\n                              className=\"info\"\n                              style={{\n                                margin: 0,\n                                textAlign: 'left',\n                                fontWeight: 400,\n                                lineHeight: '140%',\n                              }}\n                            >\n                              <strong>Pete</strong> <br />\n                              Product Marketing Manager @ LiveSession\n                            </p>\n                          </th>\n                        </tr>\n                      </tbody>\n                    </table>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  );\n};\n\nconst Newsletter = NewsletterTemplate(Content);\n\nexport const frontmatter = {\n  title: 'LiveSession Newsletter February 2021',\n  description: \"Read LiveSession's monthly update from February 2021.\",\n  date: '2021-02-01',\n  link: '/newsletters/february-2021/',\n};\n\nexport default () => <Newsletter {...frontmatter} />;\n"],"sourceRoot":""}