{"version":3,"sources":["index.vue","footer/src/index.vue"],"names":[],"mappings":"AAAA;ECwLE,yBAAU;ADtLZ;AAEA;ECwLE,iBAAY;EACZ,eAAe;EACf,kBAAe;ADtLjB;AAEA;ECwLE,gBAAW;EACX,yBAAgB;EAChB,yBAAyB;ADtL3B;AAEA;ECwLE,kBAAM;EACN,qDAAkB;EAClB,WAAU;EACV,YAAW;EACX,MAAM;EACN,OAAM;EACN,aAAO;EACP,oBAAa;ADtLf;AAEA;ECwLE,gBAAe;EACf,kBAAgB;EAChB,YAAY;ADtLd;AACA;AACE;ICwLA,mBAAA;AACF;ADtLA;AAEA;ECwLE,YAAY;EACd,kBAAA;ADtLA;AAEA;ECwLE,gBAAe;EDtLf,eAAe;AACjB;AACA;EACE,aCuLa;EDtLb,8BCuLS;EDtLT,OCuLO;EACP,eAAA;ADtLF;AACA;AACE;IACE,aCuLa;ADtLf;AACA;ICwLE,8BAAM;ADtLR;AACF;AACA;EACE,aAAa;ECwLb,sBAAK;ADtLP;AACA;AACE;IACE,aCuLa;ADtLf;AACF;AACA;EACE,kBCuLkB;EDtLlB,mBCuLmB;ADtLrB;AACA;EACE,gBCuLK;ADtLP;AACA;EACE,eAAe;EACf,cCuLO;ADtLT;AACA;EACE,gBCuLE;EDtLF,eAAe;EACf,kBCuLQ;EDtLR,eCuLc;EDtLd,gBCuLgB;EDtLhB,cCuLc;ADtLhB;AAEA;EACE,iBCuLE;EACF,cAAA;EACF,mBAAA;ADtLA","sourcesContent":[".newsletter {\n  background-color: #262626;\n}\n\n.input-border {\n  border: 1px solid;\n  padding: 0.3rem;\n  border-radius: 4px;\n}\n\n.get-started {\n  overflow: hidden;\n  padding: 5rem 1rem 0 1rem;\n  background-color: #171717;\n}\n\n.shadow {\n  position: absolute;\n  box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.8);\n  width: 110%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  margin: 0 -5%;\n  pointer-events: none;\n}\n\n.get-started-img {\n  margin-top: 4rem;\n  border-radius: 4px;\n  z-index: -10;\n}\n@media only screen and (min-width: 800px) {\n  .get-started-img {\n    margin-bottom: -40%;\n  }\n}\n\ndiv.gradient::before {\n  height: 150%;\n  margin-top: -10rem;\n}\n\n.links {\n  overflow: hidden;\n  font-size: 17px;\n}\n.links .cols {\n  display: flex;\n  justify-content: space-between;\n  flex: 1;\n  flex-wrap: wrap;\n}\n@media only screen and (min-width: 800px) {\n  .links .logo {\n    height: 150px;\n  }\n  .links .cols {\n    justify-content: space-between;\n  }\n}\n.links .col {\n  display: flex;\n  flex-direction: column;\n}\n@media only screen and (max-width: 800px) {\n  .links .col {\n    padding: 2rem;\n  }\n}\n.links .col p {\n  font-size: 1.25rem;\n  margin-bottom: 16px;\n}\n.links .col li {\n  margin-top: 1rem;\n}\n.links .col li a {\n  font-size: 17px;\n  color: #99999b;\n}\n.links .col .demo {\n  margin-top: 16px;\n  padding: 0.3rem;\n  text-align: center;\n  font-size: 1rem;\n  font-weight: 200;\n  color: #f8c307;\n}\n\n.copyright {\n  font-size: 0.8rem;\n  color: #99999b;\n  white-space: nowrap;\n}","<template>\n  <footer class=\"text-white relative overflow-hidden\">\n    <div v-if=\"version !== 'plain'\" class=\"newsletter\">\n      <form\n        :action=\"subscribe\"\n        method=\"post\"\n        id=\"revue-form\"\n        name=\"revue-form\"\n        target=\"_blank\"\n        class=\"mx-auto max-w-7xl py-12 text-left flex flex-col sm:flex-row gap-4 sm:gap-16 px-4 xl:px-0\"\n      >\n        <div>\n          <label for=\"member_email\" class=\"block text-2xl max-w-68\">\n            Subscribe to\n            <span class=\"text-primary\">our</span>\n            newsletter\n          </label>\n          <p\n            id=\"member_email_help_text\"\n            class=\"block text-sm text-gray-light mt-2\"\n          >\n            Monthly updates on new features, new starter-kits and our latest\n            articles about building great Design Systems.\n          </p>\n        </div>\n        <div\n          class=\"flex flex-col space-y-4 sm:space-y-0 mt-4 sm:flex-row sm:w-1/2 sm:gap-4 sm:items-center\"\n        >\n          <input\n            type=\"email\"\n            name=\"member[email]\"\n            id=\"member_email\"\n            aria-describedby=\"member_email_help_text\"\n            placeholder=\"Enter your e-mail\"\n            required\n            autocomplete=\"off\"\n            class=\"input-border bg-transparent border-gray-light focus:border-white text-white outline-none flex-grow\"\n          />\n          <input\n            type=\"submit\"\n            value=\"Notify me\"\n            name=\"member[subscribe]\"\n            id=\"member_submit\"\n            class=\"btn-primary\"\n            style=\"padding: 0.5rem; font-size: 0.8rem\"\n          />\n        </div>\n      </form>\n    </div>\n    <div class=\"get-started flex-col relative\" v-if=\"version === 'homepage'\">\n      <div class=\"shadow\"></div>\n      <div class=\"max-w-7xl mx-auto\">\n        <h2 class=\"text-3xl sm:text-5xl sm:w-3/4 mb-8\">\n          Create your design system with Backlight today\n        </h2>\n        <a\n          class=\"link text-base text-primary\"\n          href=\"https://backlight.dev/studio\"\n        >\n          Sign up >\n        </a>\n        <picture v-if=\"pictureSets.length > 1\">\n          <source\n            v-for=\"pic of pictureSets.slice(0, pictureSets.length - 1)\"\n            :srcset=\"pic.src\"\n            :type=\"`image/${pic.type}`\"\n          />\n          <img\n            class=\"get-started-img w-full\"\n            :src=\"pictureSets[pictureSets.length - 1].src\"\n            alt=\"Backlight interface image\"\n          />\n        </picture>\n        <img\n          v-if=\"imgSrc\"\n          alt=\"Backlight interface image\"\n          class=\"get-started-img w-full\"\n          :src=\"imgSrc\"\n        />\n      </div>\n    </div>\n    <div class=\"relative w-full\">\n      <div\n        class=\"max-w-7xl mx-auto py-12 sm:py-20 links flex flex-col sm:flex-row text-white\"\n      >\n        <div class=\"gradient flex flex-col m-4 lg:m-0 mb-8 sm:mb-4\">\n          <img\n            class=\"w-24\"\n            src=\"/assets/logo/bkl.svg\"\n            alt=\"Backlight logo\"\n            loading=\"lazy\"\n          />\n          <a class=\"mt-2\" href=\"https://divRIOTS.com\">\n            by\n            <img\n              class=\"h-4 inline\"\n              src=\"/img/divriots.svg\"\n              alt=\"‹div›RIOTS logo\"\n              loading=\"lazy\"\n            />\n          </a>\n          <div class=\"copyright my-8\">\n            Copyright © {{ new Date().getFullYear() }} Backlight. All rights\n            reserved.\n          </div>\n          <div class=\"flex\">\n            <component :is=\"Discord\"></component>\n            <component :is=\"Twitter\"></component>\n            <component :is=\"YouTube\"></component>\n            <component :is=\"Rss\"></component>\n          </div>\n        </div>\n        <div class=\"cols\">\n          <div class=\"col lg:pl-20\">\n            <p>Links</p>\n            <ul>\n              <template v-for=\"route in linksRoutes\" :key=\"route.pathname\">\n                <li>\n                  <a :href=\"route.pathname\">{{ route.label }}</a>\n                </li>\n              </template>\n            </ul>\n          </div>\n          <div class=\"col\">\n            <p>Support</p>\n            <ul>\n              <template v-for=\"route in supportRoutes\" :key=\"route.pathname\">\n                <li>\n                  <a :href=\"route.pathname\">{{ route.label }}</a>\n                </li>\n              </template>\n            </ul>\n          </div>\n          <div class=\"col\">\n            <p>Get in touch</p>\n            <a\n              href=\"https://calendly.com/backlight_/demo\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer nofollow\"\n              class=\"btn-outline demo\"\n            >\n              Book a demo\n            </a>\n            <a\n              href=\"https://www.producthunt.com/posts/backlight?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-backlight\"\n              target=\"_blank\"\n              class=\"mt-4\"\n            >\n              <img\n                src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=312123&theme=light\"\n                alt=\"Backlight - Make design systems that front-end teams want to use | Product Hunt\"\n                width=\"250\"\n                height=\"54\"\n                loading=\"lazy\"\n              />\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </footer>\n</template>\n<script>\nimport Twitter from '../../twitter/src/twitter.vue';\nimport YouTube from '../../youtube/src/youtube.vue';\nimport Discord from '../../discord/src/discord.vue';\nimport Rss from '../../rss/src/rss.vue';\nimport Logo from '../../logo/src/logo.vue';\n\nexport default {\n  props: {\n    linksRoutes: { type: Array, default: [] },\n    supportRoutes: { type: Array, default: [] },\n    subscribe: { type: String, required: true },\n    version: { type: String, default: '' },\n    imgSrc: { type: String },\n    pictureSets: { type: Array, default: [] },\n  },\n  setup() {\n    return { Twitter, Discord, Logo, YouTube, Rss };\n  },\n};\n</script>\n<style lang=\"scss\">\n.newsletter {\n  background-color: #262626;\n}\n\n.input-border {\n  border: 1px solid;\n  padding: 0.3rem;\n  border-radius: 4px;\n}\n\n.get-started {\n  overflow: hidden;\n  padding: 5rem 1rem 0 1rem;\n  background-color: #171717;\n}\n\n.shadow {\n  position: absolute;\n  box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.8);\n  width: 110%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  margin: 0 -5%;\n  pointer-events: none;\n}\n\n.get-started-img {\n  margin-top: 4rem;\n  border-radius: 4px;\n  z-index: -10;\n  @media only screen and (min-width: 800px) {\n    margin-bottom: -40%;\n  }\n}\n\ndiv.gradient::before {\n  height: 150%;\n  margin-top: -10rem;\n}\n\n.links {\n  overflow: hidden;\n  font-size: 17px;\n\n  .cols {\n    display: flex;\n    justify-content: space-between;\n    flex: 1;\n    flex-wrap: wrap;\n  }\n\n  @media only screen and (min-width: 800px) {\n    .logo {\n      height: 150px;\n    }\n\n    .cols {\n      justify-content: space-between;\n    }\n  }\n\n  .col {\n    display: flex;\n    flex-direction: column;\n    @media only screen and (max-width: 800px) {\n      padding: 2rem;\n    }\n\n    p {\n      font-size: 1.25rem;\n      margin-bottom: 16px;\n    }\n\n    li {\n      margin-top: 1rem;\n    }\n\n    li a {\n      font-size: 17px;\n      color: #99999b;\n    }\n\n    .demo {\n      margin-top: 16px;\n      padding: 0.3rem;\n      text-align: center;\n      font-size: 1rem;\n      font-weight: 200;\n      color: #f8c307;\n    }\n  }\n}\n\n.copyright {\n  font-size: 0.8rem;\n  color: #99999b;\n  white-space: nowrap;\n}\n</style>\n"],"sourceRoot":"/source_map/"}