feat: implement register page

src/_dummy/messages.json → src/_assets/messages.json

@@ -34,5 +34,28 @@
   "marketing_message_dedicated_color": "#76ce44",
   "marketing_message_dedicated_background_color": "rgba(118,206,68,0.3)",
   "marketing_message_dedicated_title": "Dedicated, Private & Secure",
-  "marketing_message_dedicated_content": "Your Bubble runs on its own dedicated system. Not even we have access to your Bubble."
+  "marketing_message_dedicated_content": "Your Bubble runs on its own dedicated system. Not even we have access to your Bubble.",
+
+  "marketing_pricing_title": "What does it cost?",
+  "marketing_pricing_options": "standard,plus,super",
+  "marketing_pricing_common_options": "Free 30-day Trial,Bubble App Suite Included,Connect Unlimited Devices,Dedicated Private VPN",
+  "marketing_pricing_period": "/mo",
+
+  "marketing_pricing_standard_title": "Standard Plan",
+  "marketing_pricing_standard_users": "1 User Account",
+  "marketing_pricing_standard_price": "1200",
+  "marketing_pricing_standard_options": "1 User Account,1TB/Month of Data Transfer",
+  "marketing_pricing_standard_link": "/register?plan=bubble",
+
+  "marketing_pricing_plus_title": "Plus Plan",
+  "marketing_pricing_plus_users": "5 User Accounts",
+  "marketing_pricing_plus_price": "1900",
+  "marketing_pricing_plus_options": "5 User Accounts,2TB/Month of Data Transfer",
+  "marketing_pricing_plus_link": "/register?plan=bubble_plus",
+
+  "marketing_pricing_super_title": "Super Plan",
+  "marketing_pricing_super_users": "10 User Accounts",
+  "marketing_pricing_super_price": "3100",
+  "marketing_pricing_super_options": "10 User Accounts,3TB/Month of Data Transfer",
+  "marketing_pricing_super_link": "/register?plan=bubble_super"
 }

src/_pages/auth/Layout.vue

@@ -13,6 +13,7 @@
   background-size: 100% auto;
   background-position-x: center;
 
+  padding: 80px;
 }
 
 .background1 {

src/_pages/auth/Register.vue

@@ -83,7 +83,7 @@
     <h2 class="covered-section-title text-center">
       {{ messages.marketing_message_got_you_covered_title }}
     </h2>
-    <div class="row px-5 mx-5">
+    <div class="row">
       <div
         v-for="(item, index) in messages.marketing_message_topics.split(',')"
         :key="index"
@@ -111,6 +111,51 @@
         </Card>
       </div>
     </div>
+
+    <!--- Pricing Section --->
+    <a
+      class="pricing-section-link text-center d-block"
+      href="https://getbubblenow.com/pricing/"
+    >
+      {{ messages.marketing_pricing_title }}
+    </a>
+    <!-- <div class="row px-5 mx-5">
+      <div class="col-12 d-flex">
+        <div
+          class="plan flex-grow-1"
+          v-for="(plan, index) in messages.marketing_pricing_options.split(',')"
+          :key="index"
+        >
+          <p class="plan-name">
+            {{ messages[`marketing_pricing_${plan}_title`] }}
+          </p>
+          <p class="plan-users">
+            {{ messages[`marketing_pricing_${plan}_users`] }}
+          </p>
+          <p class="plan-pricing">
+            {{ messages[`marketing_pricing_${plan}_users`] }}
+          </p>
+          <p
+            class="plan-common-features"
+            v-for="option in messages[`marketing_pricing_common_options`].split(
+              ','
+            )"
+            :key="option"
+          >
+            {{ option }}
+          </p>
+          <p
+            class="plan-features"
+            v-for="option in messages[
+              `marketing_pricing_${plan}_options`
+            ].split(',')"
+            :key="option"
+          >
+            {{ option }}
+          </p>
+        </div>
+      </div>
+    </div> -->
   </div>
 </template>
 
@@ -122,6 +167,12 @@
   margin-bottom: 20px;
   color: #3c3c3c;
 }
+
+.pricing-section-link {
+  color: $vivid-navy;
+  font-size: 36px;
+  margin-top: 25px;
+}
 </style>
 
 <script>

src/_scss/components/_form.scss

@@ -4,7 +4,7 @@ $form-box-shadow: 0px 5px 15px -10px #777;
 $form-border-radius: 2px;
 
 .form-title {
-  margin-top: 80px;
+  margin-top: 0px;
 }
 
 .form-sub-title {

src/_store/system.module.js

@@ -8,7 +8,7 @@ import { router } from '~/_router';
 
 import { account } from './account.module';
 
-import staticMessages from '~/_dummy/messages.json';
+import staticMessages from '~/_assets/messages.json';
 
 const state = {
   configs: {