feat: implement launch bubble screen

src/_assets/post_auth_messages.json

@@ -3,5 +3,11 @@
   "payment_page_sub_title": "We need a CC card to secure your place in the Bubblesphere.",
 
   "label_bubble_free_title": "Bubble is free for 30 days.",
-  "label_bubble_free_description": "We think you'll love the security of being in your Bubble.<br/> If for any reason you want to cancel, that's easy too!"
+  "label_bubble_free_description": "We think you'll love the security of being in your Bubble.<br/> If for any reason you want to cancel, that's easy too!",
+  "label_welcome_message": "Welcome, {{user.name}}",
+  "label_time_to_launch_bubble": "It's time to launch your Bubble.",
+  "button_label_launch_bubble": "Launch Bubble",
+  "button_label_advanced_bubble_settings": "Launch with Advanced Settings",
+
+  "how_it_works_title": "How does it work?"
 }

src/_components/shared/Button.vue

@@ -141,7 +141,9 @@ export default {
       return {
         '--height': `${this.height}px`.replace('pxpx', 'px'),
         '--width': this.width
-          ? `${this.width}px`.replace('pxpx', 'px')
+          ? this.width.endsWith('%')
+            ? this.width
+            : `${this.width}px`.replace('pxpx', 'px')
           : '',
       };
     },

src/_pages/Layout.vue

@@ -5,6 +5,8 @@
   </div>
 </template>
 
+
+
 <script>
 export default {};
 </script>

src/_pages/auth/Layout.vue

@@ -1,10 +1,12 @@
 <!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
 <template>
-  <div
-    :class="backgroundClass"
-    class="auth-layout d-flex flex-column content"
-  >
-    <router-view></router-view>
+  <div class="background w-100 h-100">
+    <div
+      :class="backgroundClass"
+      class="auth-layout d-flex flex-column content"
+    >
+      <router-view></router-view>
+    </div>
   </div>
 </template>
 
@@ -15,7 +17,6 @@
   background-repeat: no-repeat;
   background-size: 100% auto;
   background-position-x: center;
-
   padding: 80px;
 
   @include respond-below(sm) {
@@ -31,6 +32,10 @@
 .background2 {
   background-image: url('/background2.svg');
 }
+
+.background {
+  background: linear-gradient(180deg, #f3f3fb 10%, #ededed 50%, #ffffff 80%);
+}
 </style>
 
 <script>

src/_pages/main/account/Layout.vue

@@ -1,6 +1,11 @@
 <template>
-  <div :class="backgroundClass" class="auth-layout d-flex flex-column content">
-    <router-view></router-view>
+  <div class="background">
+    <div
+      :class="backgroundClass"
+      class="auth-layout d-flex flex-column content"
+    >
+      <router-view></router-view>
+    </div>
   </div>
 </template>
 
@@ -27,6 +32,10 @@
 .background2 {
   background-image: url('/background2.svg');
 }
+
+.background {
+  background: linear-gradient(180deg, #f3f3fb 10%, #ededed 50%, #ffffff 80%);
+}
 </style>
 
 <script>

src/_pages/main/bubble/LaunchBubble.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="wrapper">
+    <h3 class="text-center form-title">
+      {{ messages.label_welcome_message.parseExpression({ user }) }}
+    </h3>
+    <h3 class="d-flex align-items-center justify-content-center form-sub-title">
+      <span class="text-center">
+        {{ messages.label_time_to_launch_bubble }}
+      </span>
+    </h3>
+
+    <div
+      class="d-flex flex-column align-items-center justify-content-center mt-5 mx-auto launch-bubble-wrapper"
+    >
+      <div ref="lottie" class="lottie"></div>
+      <Button color="default" width="80%" height="60">
+        {{ messages.button_label_launch_bubble }}
+      </Button>
+
+      <a class="mt-3 btn-modal" href="#">
+        {{ messages.button_label_advanced_bubble_settings }}
+      </a>
+    </div>
+
+    <!--- How it works Section --->
+    <a class="how-it-works-section-link text-center d-block mt-5" href="#">
+      {{ messages.how_it_works_title }}
+    </a>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../_scss/components/button';
+@import '../../../_scss/breakpoints';
+
+.launch-bubble-wrapper {
+  width: 500px;
+}
+
+.lottie {
+  width: 100%;
+}
+
+.how-it-works-section-link {
+  color: #3c3c3a;
+  font-size: 2em;
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+@include respond-below(sm) {
+  .launch-bubble-wrapper {
+    width: 300px;
+  }
+}
+</style>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+import Lottie from 'lottie-web';
+
+import { util } from '~/_helpers';
+import { Button } from '~/_components/shared';
+import { Features } from '~/_components/sections';
+
+export default {
+  components: {
+    Button,
+    Features,
+  },
+
+  data() {
+    return {};
+  },
+
+  computed: {
+    ...mapState('system', ['messages']),
+    ...mapState('account', ['user']),
+  },
+
+  mounted() {
+    Lottie.loadAnimation({
+      container: this.$refs.lottie,
+      renderer: '',
+      loop: true,
+      autoplay: true,
+      path: '/rocket-launch.json',
+    });
+
+    console.log(this.user);
+  },
+
+  methods: {},
+
+  watch: {},
+};
+</script>

src/_router/index.js

@@ -89,6 +89,10 @@ export const router = new Router({
                 },
               ],
             },
+            {
+              path: 'launch-bubble',
+              component: () => import('~/_pages/main/bubble/LaunchBubble'),
+            },
             {
               path: 'test',
               component: () => import('~/_pages/main/Test'),

src/_scss/components/_button.scss

@@ -0,0 +1,8 @@
+// Copyright (c) 2020 Bubble, Inc.  All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/
+@import '../variables';
+
+.btn-modal-open {
+  color: $vivid-navy;
+  font-size: 18px;
+  line-height: 1.5;
+}

src/app/App.vue

@@ -114,7 +114,6 @@
 
 .page-container {
   height: 100vh;
-  background: linear-gradient(180deg, #f3f3fb 10%, #ededed 50%, #ffffff 80%);
 }
 </style>