Merge pull request #269 from Worxstr/landing

Add demo button to about page and landing page

Author: alexwohlbruck

src/views/landing/About.vue

@@ -9,6 +9,15 @@
       p The Worxstr management platform was built to address the specific challenges of the temporary labor management industry by people who have operated within it. The platform provides structure and consistency to traditionally disparate and inefficient systems. Every step and process laid out in the platform has been designed with efficiency in mind. The goal of the platform is to make managers more productive and boost labor retention.
       p Time is money. Using the Worxstr platform, the average manager will be able to cut down the time consumed by each task by at least one third, based on conservative time calculations. The increase in manager productivity will enable greater accuracy and increased bandwidth. A 33% increase in productivity will reduce expenses, increase efficiency, speed up processes, boost retention, and streamline reporting.
 
+      v-btn(
+        v-if='!me'
+        :to="{ name: 'contact', params: {option: 'demo'}}"
+        class="mr-3"
+        outlined
+        color='primary'
+        large
+      )
+        span Schedule in-person demo
 
       .demo-video(:class='{small: $vuetify.breakpoint.smAndDown}')
         iframe.mt-5(

src/views/landing/Contact.vue

@@ -65,6 +65,10 @@ type Option = {
   dialog: boolean
 }
 
+function openCalendly() {
+  calendly.showPopupWidget('https://calendly.com/d/cps-z6n-m4m/worxstr-consultation?hide_event_type_details=0&hide_gdpr_banner=1&primary_color=2e6aef')
+}
+
 @Component({
   metaInfo: {
     title: 'Contact us'
@@ -78,7 +82,7 @@ export default class Contact extends Vue {
 
   mounted() {
     if (this.$route.params.option) {
-      this.chosenOption = this.$route.params.option
+      this.selectOption(this.helpOptions.find(option => option.name == this.$route.params.option))
     }
   }
 
@@ -99,17 +103,14 @@ export default class Contact extends Vue {
 
   helpOptions: Option[] = [
     {
-      name: 'Demo',
+      name: 'demo',
       title: 'Schedule a demo',
       text: 'Want to learn more about our platform? Schedule a demo with one of our managers to learn more about Worxstr and how it can help you manage your team.',
       hideIfSignedIn: true,
       button: {
         text: 'Find a time',
         color: 'primary',
-        action: () => {
-          calendly.showPopupWidget('https://calendly.com/d/cps-z6n-m4m/worxstr-consultation?hide_event_type_details=0&hide_gdpr_banner=1&primary_color=2e6aef')
-          return false
-        }
+        action: openCalendly
       },
       dialog: false,
     },

src/views/landing/Home.vue

@@ -46,20 +46,44 @@
               span(:class="`${$vuetify.theme.dark ? 'white' : 'black'}--text`") Sign in
 
           .d-flex.mt-6.align-center
-            p.mb-0.mr-2.font-weight-medium Get the app:
             v-btn(
-              icon
+              color="blue"
+              class="mr-3"
               href='https://apps.apple.com/us/app/worxstr/id1571853545'
               target='_blank'
             )
-              v-icon mdi-apple
+              v-icon.white--text mdi-apple
 
             v-btn(
-              icon
+              color="green"
+              class="mr-3"
               href='https://play.google.com/store/apps/details?id=com.worxstr.worxstr'
               target='_blank'
             )
-              v-icon mdi-google-play
+              v-icon.white--text mdi-google-play
+
+            v-btn(
+              :to="{ name: 'about'}"
+              class="mr-3"
+              outlined
+              color='primary'
+            )
+              span Learn more
+
+            //- p.mb-0.mr-2.font-weight-medium Get the app:
+            //- v-btn(
+            //-   icon
+            //-   href='https://apps.apple.com/us/app/worxstr/id1571853545'
+            //-   target='_blank'
+            //- )
+            //-   v-icon mdi-apple
+
+            //- v-btn(
+            //-   icon
+            //-   href='https://play.google.com/store/apps/details?id=com.worxstr.worxstr'
+            //-   target='_blank'
+            //- )
+            //-   v-icon mdi-google-play
 
           v-spacer(style='height: 70px')