{"version":3,"sources":["index.vue","hero/src/index.vue"],"names":[],"mappings":"AAAA;ECwOE,YAAY;ADtOd;AAEA;ECwOE,YAAY;EACZ,cAAY;EACZ,WAAW;EACX,YAAW;EACX,kBAAY;EACZ,sBAAkB;EAClB,+CAAsB;EACtB,iDAAuC;EACvC,kBAAiB;EACjB,SAAQ;EACR,kBAAS;EACT,QAAQ;EACR,iBAAQ;ADtOV;ACyOA;AACE;IACE,uBAAuB;AACzB;AACA;IACE,yBAAyB;AAC3B;AACF;ADtOA;ECwOE,YAAO;EACP,YAAY;EACZ,aAAY;EACZ,0BAAa;EACb,mBAAmB;ADtOrB;AACA;ACwOE;IACE,8BAA8B;AAChC;AACF;AAEA;EACE,qBAAqB;EACrB,aAAa;EACb,iCAAiC;EACjC,gBAAgB;ADtOlB;AACA;EACE,WCuOW;EDtOX,SCuOQ;EDtOR,mBCuOmB;EDtOnB,kBCuOkB;ADtOpB;AACA;EACE,kBCuOkB;EDtOlB,WCuOW;EDtOX,YCuOY;EDtOZ,MCuOM;EDtON,OCuOO;ADtOT;AACA;EACE,iCAAiC;ECwOjC,UAAU;ADtOZ;AAEA;ECwOA,oBAAA;ADtOA;AAEA;ECwOA,YAAA;ADtOA;ACwOA;AACE;IDtOE,aAAa;ICwOb,mBAAmB;IACnB,aAAa;ADtOf;AACA;IACE,YAAY;ICwOZ,gBAAU;IDtOV,YCuOY;ADtOd;AACF;AAEA;ECwOA,aAAA;EDtOE,iCAAiC;ECwOjC,WAAU;EACV,qBAAa;EACb,gBAAgB;EAChB,YAAW;ADtOb;AACA;ECwOE,iCAAY;EDtOZ,UAAU;AACZ;AAEA;ACwOE;IACF,iBAAA;IACI,aAAM;IACN,mBAAmB;ADtOrB;AACF;AAEA;ACwOA;IACI,YAAW;AACb;ADtOF;AACA;ACwOE;IACE,YAAY;AACd;ADtOF;AACA;ACwOE;IACF,YAAA;ADtOE;ACwOF;ADrOA;ECwOE,gCAAU;EACV,0BAAiB;EACjB,UAAU;EDtOV,iBCuOW;ADtOb;AACA;ACwOE;IACE,SAAS;IACX,QAAA;AACA;ADtOF;AACA;ACwOA;IACI,SAAS;AACX;AACF;AACA;AACE;IACF,SAAA;ADtOE;AACF;AAEA;EACE,wBAAwB;AAC1B;AAEA;EACE,2CAA2C;AAC7C","sourcesContent":["div.gradient::before {\n  height: 100%;\n}\n\n.spinner:before {\n  content: \" \";\n  display: block;\n  width: 64px;\n  height: 64px;\n  border-radius: 50%;\n  border: 6px solid #fff;\n  border-color: #fff transparent #fff transparent;\n  animation: spinner 1.2s linear infinite;\n  position: absolute;\n  left: 50%;\n  margin-left: -32px;\n  top: 50%;\n  margin-top: -32px;\n}\n\n@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.wrapper {\n  height: auto;\n  margin: auto;\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: center;\n}\n@media only screen and (min-width: 1024px) {\n  .wrapper {\n    grid-template-columns: 6fr 4fr;\n  }\n}\n\n.hero-embedded-video {\n  border-radius: 0.5rem;\n  outline: none;\n  transition: display 0.1s ease-out;\n  overflow: hidden;\n}\n.hero-embedded-video .embedded-wrapper {\n  width: 100%;\n  height: 0;\n  padding-top: 56.25%;\n  position: relative;\n}\n.hero-embedded-video .embedded-wrapper :deep(iframe) {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.hero-embedded-video:not(.hidden) ~ * {\n  transition: opacity 0.1s ease-out;\n  opacity: 0;\n}\n\n.left-side {\n  justify-self: center;\n}\n\n.right-side {\n  height: auto;\n}\n@media only screen and (min-width: 1024px) {\n  .right-side {\n    display: grid;\n    place-items: center;\n    height: 720px;\n  }\n  .right-side .img-size {\n    width: 960px;\n    max-width: 960px;\n    height: auto;\n  }\n}\n\n#hero-video {\n  outline: none;\n  transition: display 0.1s ease-out;\n  z-index: 11;\n  border-radius: 0.5rem;\n  overflow: hidden;\n  width: 36rem;\n}\n#hero-video:not(.hidden) ~ * {\n  transition: opacity 0.1s ease-out;\n  opacity: 0;\n}\n\n@media only screen and (min-width: 1024px) {\n  .set-size {\n    min-height: 784px;\n    display: flex;\n    align-items: center;\n  }\n}\n\n@media only screen and (min-width: 1024px) {\n  .video-players {\n    width: 28rem;\n  }\n}\n@media only screen and (min-width: 1280px) {\n  .video-players {\n    width: 42rem;\n  }\n}\n@media only screen and (min-width: 1600px) {\n  .video-players {\n    width: 50rem;\n  }\n}\n\n.primary-btn-fix {\n  transform: translate(-50%, -50%);\n  transition: transform 0.2s;\n  padding: 0;\n  padding-left: 5px;\n}\n@media only screen and (min-width: 1024px) {\n  .primary-btn-fix {\n    left: 30%;\n    top: 55%;\n  }\n}\n@media only screen and (min-width: 1280px) {\n  .primary-btn-fix {\n    left: 40%;\n  }\n}\n@media only screen and (min-width: 1600px) {\n  .primary-btn-fix {\n    left: 50%;\n  }\n}\n\n.primary-btn-fix:hover::before {\n  display: none !important;\n}\n\n.primary-btn-fix:hover {\n  transform: translate(-50%, -50%) scale(1.2);\n}","<script>\nimport { ref, computed, onBeforeUnmount } from 'vue';\n\nexport default {\n  props: {\n    videoType: String,\n    videoSrc: String,\n    imgSrc: String,\n    highRes: String,\n    imgHeight: String,\n    imgWidth: String,\n  },\n\n  setup({ videoType, videoSrc }) {\n    const heroVideo = ref(null);\n    const isYoutube = computed(() => videoType === 'youtube');\n    const isApiVideo = computed(() => videoType === 'apivideo');\n    const playing = ref(false);\n    let embeddedPlayer;\n    let youtubeScript;\n    let apiScript;\n\n    const loadYoutube = () => {\n      if (typeof window !== 'undefined' && typeof document !== 'undefined') {\n        return new Promise((resolve) => {\n          youtubeScript = document.createElement('script');\n          youtubeScript.src = 'https://www.youtube.com/player_api';\n          const firstScriptTag = document.getElementsByTagName('script')[0];\n          firstScriptTag.parentNode.insertBefore(youtubeScript, firstScriptTag);\n\n          window.onYouTubeIframeAPIReady = () => {\n            const player = new YT.Player('hero-embedded-placeholder', {\n              videoId: videoSrc,\n              events: {\n                onReady: () => resolve(player),\n              },\n            });\n          };\n        });\n      }\n    };\n\n    const loadApiVideo = () => {\n      if (typeof window !== 'undefined' && typeof document !== 'undefined') {\n        return new Promise((resolve) => {\n          apiScript = document.createElement('script');\n          apiScript.src = 'https://unpkg.com/@api.video/player-sdk';\n          const firstScriptTag = document.getElementsByTagName('script')[0];\n          firstScriptTag.parentNode.insertBefore(apiScript, firstScriptTag);\n\n          apiScript.onload = () => {\n            const sdk = new PlayerSdk('#hero-embedded-placeholder', {\n              id: videoSrc,\n              hideControls: true,\n              // ... other optional options, see https://docs.api.video/docs/video-player-sdk#method-2-typescript\n            });\n            sdk.addEventListener('ready', () => {\n              sdk.setVolume(0.2);\n              sdk.showControls(['volume', 'progressBar', 'fullscreen']);\n            });\n            resolve(sdk);\n          };\n        });\n      }\n    };\n\n    onBeforeUnmount(() => {\n      if (embeddedPlayer && youtubeScript) {\n        embeddedPlayer.destroy();\n        youtubeScript.parentNode.removeChild(youtubeScript);\n      }\n      if (embeddedPlayer && apiScript) {\n        embeddedPlayer.destroy();\n        apiScript.parentNode.removeChild(apiScript);\n      }\n    });\n\n    return {\n      heroVideo,\n      isYoutube,\n      isApiVideo,\n      playing,\n      stop: () => {\n        playing.value = false;\n        const video = heroVideo.value;\n\n        if (isYoutube.value) {\n          embeddedPlayer.stopVideo();\n        } else if (isApiVideo.value) {\n          embeddedPlayer.pause();\n        } else {\n          video.pause();\n          video.currentTime = 0;\n        }\n      },\n      play: async () => {\n        const video = heroVideo.value;\n        playing.value = true;\n\n        if (isYoutube.value) {\n          embeddedPlayer = await loadYoutube();\n          embeddedPlayer.playVideo();\n        } else if (isApiVideo.value) {\n          embeddedPlayer = await loadApiVideo();\n          embeddedPlayer.play();\n        } else {\n          // Show loading animation.\n          var playPromise = video.play();\n\n          if (playPromise !== undefined) {\n            playPromise\n              .then((_) => {\n                // Automatic playback started!\n                // Show playing UI.\n              })\n              .catch((error) => {\n                // Auto-play was prevented\n                // Show paused UI.\n              });\n          }\n        }\n      },\n    };\n  },\n};\n</script>\n<template>\n  <section class=\"text-white w-full overflow-hidden\">\n    <div class=\"wrapper gradient\">\n      <div\n        class=\"left-side z-10 lg:max-w-2xl lg:w-full my-8 sm:my-12 md:my-16 lg:my-20 xl:my-28\"\n      >\n        <div class=\"flex justify-start px-4 lg:mr-24\">\n          <div class=\"text-left\">\n            <h1 class=\"main-title font-semibold leading-normal\">\n              <span class=\"text-primary whitespace-nowrap\">\n                Design systems,\n              </span>\n              <span class=\"flex items-center\">Code-side</span>\n            </h1>\n            <p class=\"main-subtitle mt-3 sm:mt-5 sm:mx-auto md:mt-5 lg:mx-0\">\n              Backlight is a collaborative platform empowering front-end teams\n              to build and ship great design systems.\n            </p>\n            <div class=\"flex mt-8 space-x-8\">\n              <a class=\"btn-primary\" href=\"/get-started\">Get Started</a>\n              <a\n                href=\"https://calendly.com/backlight_/discovery-call\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer nofollow\"\n                class=\"btn-outline demo\"\n              >\n                Book a call\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"right-side lg:py-12\">\n        <div\n          class=\"red cursor-pointer relative h-full\"\n          @click=\"play\"\n          v-show=\"!playing\"\n        >\n          <img\n            class=\"img-size rounded-lg\"\n            alt=\"Backlight interface image placeholder\"\n            :src=\"imgSrc\"\n            :srcset=\"highRes\"\n            :width=\"imgWidth\"\n            :height=\"imgHeight\"\n          />\n          <button\n            class=\"absolute btn-primary rounded-full w-20 h-20 lg:w-28 lg:h-28 left-1/2 top-1/2 primary-btn-fix\"\n            aria-label=\"Play button\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n              aria-hidden=\"true\"\n              class=\"m-auto w-10 lg:w-14\"\n              viewBox=\"0 0 16 16\"\n            >\n              <g fill=\"#000000\">\n                <path\n                  d=\"M3.78 2L3 2.41v12l.78.42l9-6V8l-9-6zM4 13.48V3.35l7.6 5.07L4 13.48z\"\n                ></path>\n              </g>\n            </svg>\n          </button>\n        </div>\n        <div class=\"set-size\" v-show=\"playing\">\n          <div class=\"video-players px-4 rounded-lg relative\">\n            <div\n              v-if=\"isYoutube\"\n              class=\"hero-embedded-video\"\n              ref=\"heroVideo\"\n              tabindex=\"-1\"\n            >\n              <div class=\"embedded-wrapper\">\n                <div id=\"hero-embedded-placeholder\"></div>\n              </div>\n            </div>\n            <div\n              v-else-if=\"isApiVideo\"\n              class=\"hero-embedded-video spinner\"\n              ref=\"heroVideo\"\n              tabindex=\"-1\"\n            >\n              <div class=\"embedded-wrapper\">\n                <div id=\"hero-embedded-placeholder\"></div>\n              </div>\n            </div>\n            <video\n              v-else\n              id=\"hero-video\"\n              preload=\"none\"\n              volume=\"0.3\"\n              controls\n              @ended=\"stop\"\n              ref=\"heroVideo\"\n            >\n              <source :src=\"videoSrc\" type=\"video/mp4\" />\n            </video>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n<style lang=\"scss\" scoped>\ndiv.gradient::before {\n  height: 100%;\n}\n\n.spinner:before {\n  content: ' ';\n  display: block;\n  width: 64px;\n  height: 64px;\n  border-radius: 50%;\n  border: 6px solid #fff;\n  border-color: #fff transparent #fff transparent;\n  animation: spinner 1.2s linear infinite;\n  position: absolute;\n  left: 50%;\n  margin-left: -32px;\n  top: 50%;\n  margin-top: -32px;\n}\n@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.wrapper {\n  height: auto;\n  margin: auto;\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: center;\n\n  @media only screen and (min-width: 1024px) {\n    grid-template-columns: 6fr 4fr;\n  }\n}\n\n.hero-embedded-video {\n  border-radius: 0.5rem;\n  outline: none;\n  transition: display 0.1s ease-out;\n  overflow: hidden;\n\n  .embedded-wrapper {\n    width: 100%;\n    height: 0;\n    padding-top: 56.25%;\n    position: relative;\n\n    :deep(iframe) {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n    }\n  }\n\n  &:not(.hidden) ~ * {\n    transition: opacity 0.1s ease-out;\n    opacity: 0;\n  }\n}\n\n.left-side {\n  justify-self: center;\n}\n\n.right-side {\n  height: auto;\n\n  @media only screen and (min-width: 1024px) {\n    display: grid;\n    place-items: center;\n    height: 720px;\n\n    .img-size {\n      width: 960px;\n      max-width: 960px;\n      height: auto;\n    }\n  }\n}\n\n#hero-video {\n  outline: none;\n  transition: display 0.1s ease-out;\n  z-index: 11;\n  border-radius: 0.5rem;\n  overflow: hidden;\n  width: 36rem;\n\n  &:not(.hidden) ~ * {\n    transition: opacity 0.1s ease-out;\n    opacity: 0;\n  }\n}\n.set-size {\n  @media only screen and (min-width: 1024px) {\n    min-height: 784px;\n    display: flex;\n    align-items: center;\n  }\n}\n.video-players {\n  @media only screen and (min-width: 1024px) {\n    width: 28rem;\n  }\n  @media only screen and (min-width: 1280px) {\n    width: 42rem;\n  }\n  @media only screen and (min-width: 1600px) {\n    width: 50rem;\n  }\n}\n\n.primary-btn-fix {\n  transform: translate(-50%, -50%);\n  transition: transform 0.2s;\n  padding: 0;\n  padding-left: 5px;\n  @media only screen and (min-width: 1024px) {\n    left: 30%;\n    top: 55%;\n  }\n  @media only screen and (min-width: 1280px) {\n    left: 40%;\n  }\n  @media only screen and (min-width: 1600px) {\n    left: 50%;\n  }\n}\n.primary-btn-fix:hover::before {\n  display: none !important;\n}\n.primary-btn-fix:hover {\n  transform: translate(-50%, -50%) scale(1.2);\n}\n</style>\n"],"sourceRoot":"/source_map/"}