Progress on the landing page

resources/js/components/Navbar.vue

@@ -12,10 +12,11 @@
             class="bg-gray-100 text-gray-600 font-semibold inline-block mb-4 ml-1 px-3 rounded-full text-black text-xs tracking-wider"
           >BETA</span>
           </router-link>
-          <workspace-dropdown class="ml-6" />
+          <workspace-dropdown class="ml-6"/>
         </div>
         <div class="hidden md:block ml-auto relative">
-          <router-link :to="{name:'integrations'}" class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1 mr-8">
+          <router-link :to="{name:'integrations'}"
+                       class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1 mr-8">
             Integrations
           </router-link>
           <a href="#" class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1 mr-8">
@@ -88,39 +89,40 @@
                     {{ $t('logout') }}
                   </a>
                 </dropdown>
-                <div v-else>
+                <div class="flex gap-2" v-else>
                   <router-link v-if="$route.name !== 'login'" :to="{ name: 'login' }"
                                class="text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white px-0 sm:px-3 py-2 rounded-md text-sm"
                                active-class="text-gray-800 dark:text-white"
                   >
                     {{ $t('login') }}
                   </router-link>
-                  <router-link :to="{ name: 'register' }"
+
-                               class="hidden md:inline text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white pl-3 py-2 rounded-md text-sm"
+                  <v-button size="small" :to="{ name: 'register' }" color="outline-blue" v-track.nav_create_form_click :arrow="true">
-                               active-class="text-gray-800 dark:text-white"
-                  >
-                    <v-button v-track.nav_create_form_click :arrow="true">
                     Create a form
                   </v-button>
-                  </router-link>
+
                 </div>
               </div>
             </div>
             <div>
               <a class="m-1.5" :href="githubUrl" target="_blank">
-                <button class="border btn duration-200 ease-in focus:outline-none focus:ring-2 focus:ring-gray-100 focus:ring-offset-2 focus:ring-offset-gray-50 font-semibold dark:bg-white p-2 rounded-full rounded-lg text-base text-center transition dark:text-white"
+                <button
+                  class="duration-200 text-gray-600 hover:text-blue-600 ease-in focus:outline-none focus:ring-2 focus:ring-gray-100 focus:ring-offset-2 focus:ring-offset-gray-50 font-semibold dark:bg-white p-2 rounded-full rounded-lg text-base text-center transition dark:text-white"
                   v-track.github_link_click
                 >
-                  <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="w-6 h-6" viewBox="0 0 256 250" version="1.1" preserveAspectRatio="xMidYMid">
+                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="w-6 h-6"
+                       viewBox="0 0 256 250" version="1.1" preserveAspectRatio="xMidYMid" fill="currentColor">
                     <g>
-                      <path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"/>
+                      <path fill="currentColor"
+                        d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z"
+                        />
                     </g>
                   </svg>
                 </button>
               </a>
               <transition name="fade" mode="out-in">
                 <button v-if="darkModeEnabled" key="sun"
-                        class="border cursor-pointer p-2 rounded-full rounded-md text-sm dark:bg-white dark:text-black"
+                        class="text-gray-600 hover:text-blue-600 cursor-pointer p-2 rounded-full rounded-md text-sm dark:bg-white dark:text-black"
                         @click="toggleDarkMode"
                 >
                   <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
@@ -132,7 +134,7 @@
                   </svg>
                 </button>
                 <button v-else key="moon"
-                        class="border cursor-pointer p-2 rounded-full rounded-md text-sm text-black"
+                        class="cursor-pointer text-gray-600 hover:text-blue-600 p-2 rounded-full rounded-md text-sm text-black"
                         @click="toggleDarkMode"
                 >
                   <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
@@ -153,7 +155,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import {mapGetters} from 'vuex'
 import Dropdown from './common/Dropdown'
 import axios from 'axios'
 import WorkspaceDropdown from './WorkspaceDropdown'
@@ -171,16 +173,16 @@ export default {
 
   computed: {
     githubUrl: () => window.config.links.github_url,
-    form () {
+    form() {
       if (this.$route.name && this.$route.name.startsWith('forms.show_public')) {
         return this.$store.getters['open/forms/getBySlug'](this.$route.params.slug)
       }
       return null
     },
-    showAuth () {
+    showAuth() {
       return this.$route.name && !this.$route.name.startsWith('forms.show_public')
     },
-    hasNavbar () {
+    hasNavbar() {
       if (this.isIframe) return false
 
       if (this.$route.name && this.$route.name.startsWith('forms.show_public')) {
@@ -195,32 +197,32 @@ export default {
       }
       return true
     },
-    isIframe () {
+    isIframe() {
       return window.location !== window.parent.location || window.frameElement
     },
     ...mapGetters({
       user: 'auth/user'
     }),
-    userOnboarded () {
+    userOnboarded() {
       return this.user && this.user.workspaces_count > 0
     }
   },
 
   watch: {
     darkModeEnabled: {
-      handler (val) {
+      handler(val) {
         window.localStorage.setItem('opnform-dark-mode-enabled', val ? 1 : 0)
       },
       deep: true
     }
   },
 
-  mounted () {
+  mounted() {
     this.darkModeEnabled = document.body.classList.contains('dark')
   },
 
   methods: {
-    async logout () {
+    async logout() {
       // Log out the user.
       await this.$store.dispatch('auth/logout')
 
@@ -229,9 +231,9 @@ export default {
       this.$store.dispatch('open/forms/resetState')
 
       // Redirect to login.
-      this.$router.push({ name: 'login' })
+      this.$router.push({name: 'login'})
     },
-    toggleDarkMode () {
+    toggleDarkMode() {
       document.body.classList.toggle('dark')
       this.darkModeEnabled = document.body.classList.contains('dark')
     }

resources/js/components/common/Button.vue

@@ -1,19 +1,29 @@
 <template>
-  <button :type="nativeType" :disabled="loading" :class="`py-${sizes['p-y']} px-${sizes['p-x']}
+  <button v-if="!to" :type="nativeType" :disabled="loading" :class="btnClasses"
-    bg-${color}-${colorShades['main']} hover:bg-${color}-${colorShades['hover']} focus:ring-${color}-${colorShades['ring']}
-    focus:ring-offset-${color}-${colorShades['ring-offset']} text-${colorShades['text']}
-    transition ease-in duration-200 text-center text-${sizes['font']} font-semibold focus:outline-none focus:ring-2
-    focus:ring-offset-2 border-2 border-${colorShades['border']} rounded-lg`"
           @click="$emit('click',$event)"
   >
     <template v-if="!loading">
-      <slot />
+      <span class="no-underline">
-      <svg v-if="arrow" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="float-right mt-1 ml-2 w-4 h-4">
+      <slot/>
-        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
+        </span>
+      <svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1 11L11 1M11 1H1M11 1V11" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round"/>
       </svg>
+
     </template>
-    <loader v-else class="h-6 w-6 mx-auto" :class="`text-${colorShades['text']}`" />
+    <loader v-else class="h-6 w-6 mx-auto" :class="`text-${colorShades['text']}`"/>
   </button>
+  <router-link v-else :class="btnClasses" :to="to" :target="target"
+  >
+      <span class="no-underline">
+      <slot/>
+      </span>
+    <svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1 11L11 1M11 1H1M11 1V11" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+            stroke-linejoin="round"/>
+    </svg>
+  </router-link>
 </template>
 
 <script>
@@ -26,11 +36,6 @@ export default {
       default: 'blue'
     },
 
-    shade: {
-      type: String,
-      default: 'normal'
-    },
-
     size: {
       type: String,
       default: 'medium'
@@ -49,52 +54,60 @@ export default {
     arrow: {
       type: Boolean,
       default: false
-    }
+    },
+
+    to: {
+      type: Object,
+      default: null
+    },
+
+    target: {
+      type: String,
+      default: '_self'
+    },
   },
 
   computed: {
-    colorShades () {
+    btnClasses() {
-      if (this.shade === 'lighter') {
+      const sizes = this.sizes
-        return {
+      const colorShades = this.colorShades
-          main: '200',
+      return `${sizes['p-y']} ${sizes['p-x']}
-          hover: '300',
+        ${colorShades['main']} ${colorShades['hover']} ${colorShades['ring']} ${colorShades['ring-offset']}
-          ring: '100',
+        ${colorShades['text']} transition ease-in duration-200 text-center text-${sizes['font']} font-medium focus:outline-none focus:ring-2
-          'ring-offset': '50',
+        focus:ring-offset-2 rounded-lg flex items-center hover:no-underline`
-          text: 'gray-900',
-          border: 'blue'
-        }
-      }
-      if (this.shade === 'light') {
-        return {
-          main: '400',
-          hover: '500',
-          ring: '300',
-          'ring-offset': '150',
-          text: 'white',
-          border: 'white'
-        }
-      }
-      return {
-        main: '600',
-        hover: '700',
-        ring: '500',
-        'ring-offset': '200',
-        text: 'white',
-        border: 'blue'
-      }
     },
-    sizes () {
+    colorShades() {
+      if (this.color === 'blue') {
+        return {
+          main: 'bg-blue-600',
+          hover: 'hover:bg-blue-700',
+          ring: 'focus:ring-blue-500',
+          'ring-offset': 'focus:ring-offset-blue-200',
+          text: 'text-white',
+        }
+      } else if (this.color === 'outline-blue') {
+        return {
+          main: 'bg-transparent border-2 border-blue-600',
+          hover: 'hover:bg-blue-600',
+          ring: 'focus:ring-blue-500',
+          'ring-offset': 'focus:ring-offset-blue-200',
+          text: 'text-blue-600 hover:text-white',
+        }
+      }
+      console.error('Unknown color')
+    },
+    sizes() {
       if (this.size === 'small') {
         return {
           font: 'sm',
-          'p-y': '1',
+          'p-y': 'py-1',
-          'p-x': '2'
+          'p-x': 'px-2'
         }
       }
       return {
         font: 'base',
-        'p-y': '2',
+        'p-y': 'py-2',
-        'p-x': '4'
+        'p-x': 'px-4'
       }
     }
   }

resources/js/components/common/FancyLink.vue

@@ -1,103 +0,0 @@
-<template>
-  <router-link :class="`py-${sizes['p-y']} px-${sizes['p-x']}
-    bg-${color}-${colorShades['main']} hover:bg-${color}-${colorShades['hover']} focus:ring-${color}-${colorShades['ring']}
-    focus:ring-offset-${color}-${colorShades['ring-offset']} text-${colorShades['text']}
-    transition ease-in duration-200 text-center text-${sizes['font']} font-semibold shadow-md focus:outline-none focus:ring-2
-    focus:ring-offset-2 rounded-lg hover:no-underline inline-block`" :to="to" :target="target"
-  >
-    <template v-if="!loading">
-      <slot />
-    </template>
-    <loader v-else class="h-6 w-6 text-white mx-auto" />
-  </router-link>
-</template>
-
-<script>
-export default {
-  name: 'FancyLink',
-
-  props: {
-    to: {
-      type: Object
-    },
-
-    color: {
-      type: String,
-      default: 'nt-blue'
-    },
-
-    target: {
-      type: String,
-      default: '_self'
-    },
-
-    shade: {
-      type: String,
-      default: 'normal'
-    },
-
-    size: {
-      type: String,
-      default: 'medium'
-    },
-
-    loading: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  computed: {
-    colorShades () {
-      if (this.color === 'nt-blue') {
-        return {
-          main: 'default',
-          hover: 'light',
-          ring: 'light',
-          'ring-offset': 'lighter',
-          text: 'white'
-        }
-      }
-      if (this.shade === 'lighter') {
-        return {
-          main: '200',
-          hover: '300',
-          ring: '100',
-          'ring-offset': '50',
-          text: 'gray-900'
-        }
-      }
-      if (this.shade === 'light') {
-        return {
-          main: '400',
-          hover: '500',
-          ring: '300',
-          'ring-offset': '150',
-          text: 'white'
-        }
-      }
-      return {
-        main: '600',
-        hover: '700',
-        ring: '500',
-        'ring-offset': '200',
-        text: 'white'
-      }
-    },
-    sizes () {
-      if (this.size === 'small') {
-        return {
-          font: 'sm',
-          'p-y': '1',
-          'p-x': '2'
-        }
-      }
-      return {
-        font: 'base',
-        'p-y': '2',
-        'p-x': '4'
-      }
-    }
-  }
-}
-</script>

resources/js/components/common/index.js

@@ -3,10 +3,8 @@ import Vue from 'vue'
 import Dropdown from './Dropdown'
 import Card from './Card'
 import Button from './Button'
-import FancyLink from './FancyLink';
 // Components that are registered globaly.
 [
-  FancyLink,
   Card,
   Button,
   Dropdown

resources/js/components/open/forms/components/FormStats.vue

@@ -7,9 +7,9 @@
             You need a <pro-tag class="mx-1" /> subscription to access your form analytics.
           </p>
           <p class="mt-5 text-center">
-            <fancy-link :to="{name:'pricing'}">
+            <v-button :to="{name:'pricing'}">
               Subscribe
-            </fancy-link>
+            </v-button>
           </p>
         </div>
       </div>
@@ -40,7 +40,6 @@ import {
   PointElement
 } from 'chart.js'
 import ProTag from '../../../common/ProTag'
-import FancyLink from '../../../common/FancyLink'
 
 ChartJS.register(
   Title,
@@ -55,7 +54,6 @@ ChartJS.register(
 export default {
   name: 'FormStats',
   components: {
-    FancyLink,
     ProTag,
     LineChart
   },

resources/js/components/pages/welcome/Features.vue

@@ -2,115 +2,77 @@
   <div id="features" class="px-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
 
     <template v-if="featuresOnly">
-      <div class="mb-10 max-w-xl md:mx-auto sm:text-center lg:max-w-2xl ">
+      <div class="mb-16 max-w-xl md:mx-auto sm:text-center lg:max-w-2xl ">
-        <h2 class="mb-6 font-sans text-4xl font-bold leading-none tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl md:mx-auto">
+        <h2 class="mb-6 font-sans text-4xl font-semibold leading-none tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl md:mx-auto">
           The easiest way to create forms. <br/>
           And it's <span class="text-nt-blue">100% free!</span>
         </h2>
         <p class="text-base text-gray-700 dark:text-gray-300 md:text-lg">
-          Need a contact form? Doing a survey? Create a form in 3 minutes and start receiving submissions.
+          Need a contact form? Doing a survey? Create a form in 2 minutes and start receiving submissions.
         </p>
       </div>
 
-      <div class="grid md:grid-cols-2">
+      <div class="flex flex-wrap items-center mt-16" :class="{'md:flex-row-reverse':index%2==1}" v-for="(step,index) in [
-        <div class="mr-10">
+        {
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-nt-blue">
+          title: 'Create',
+          description: 'Create a form in 2 minutes. More than 10 input types, images, logic and much more.',
+          features: [
+            'Build a simple form in minutes.',
+            'No coding needed.'
+          ],
+          img: 'img/pages/welcome/step-1.jpg'
+        },
+        {
+          title: 'Share',
+          description: 'Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.\n',
+          features: [
+            'Build a simple form in minutes.',
+            'No coding needed.'
+          ],
+          img: 'img/pages/welcome/step-1.jpg'
+        },
+        {
+          title: 'Get Results',
+          description: 'Create a form in 2 minutes. More than 10 input types, images, logic and much more.',
+          features: [
+            'Build a simple form in minutes.',
+            'No coding needed.'
+          ],
+          img: 'img/pages/welcome/step-3.jpg'
+        }
+      ]" :key="step.title">
+        <div class="w-full md:w-1/2" :class="{'md:pl-8':index%2==1, 'md:pr-8':index%2==0}">
+          <svg v-if="step.title=='Create'" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="w-10 h-10 text-nt-blue">
+            <path d="M22 7.99997H13.6C10.2397 7.99997 8.55953 7.99997 7.27606 8.65393C6.14708 9.22917 5.2292 10.1471 4.65396 11.276C4 12.5595 4 14.2397 4 17.6V34.4C4 37.7603 4 39.4404 4.65396 40.7239C5.2292 41.8529 6.14708 42.7708 7.27606 43.346C8.55953 44 10.2397 44 13.6 44H30.4C33.7603 44 35.4405 44 36.7239 43.346C37.8529 42.7708 38.7708 41.8529 39.346 40.7239C40 39.4404 40 37.7603 40 34.4V26M15.9999 32H19.349C20.3274 32 20.8166 32 21.2769 31.8894C21.6851 31.7915 22.0753 31.6298 22.4331 31.4105C22.8368 31.1632 23.1827 30.8173 23.8745 30.1255L43 11C44.6569 9.34311 44.6569 6.65682 43 4.99997C41.3431 3.34311 38.6569 3.34311 37 4.99996L17.8745 24.1255C17.1827 24.8173 16.8368 25.1632 16.5894 25.5668C16.3701 25.9247 16.2085 26.3149 16.1105 26.723C15.9999 27.1834 15.9999 27.6726 15.9999 28.6509V32Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg  v-else-if="step.title=='Share'" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="w-10 h-10 text-nt-blue">
+            <path d="M17.18 27.02L30.84 34.98M30.82 13.02L17.18 20.98M42 10C42 13.3137 39.3137 16 36 16C32.6863 16 30 13.3137 30 10C30 6.68629 32.6863 4 36 4C39.3137 4 42 6.68629 42 10ZM18 24C18 27.3137 15.3137 30 12 30C8.68629 30 6 27.3137 6 24C6 20.6863 8.68629 18 12 18C15.3137 18 18 20.6863 18 24ZM42 38C42 41.3137 39.3137 44 36 44C32.6863 44 30 41.3137 30 38C30 34.6863 32.6863 32 36 32C39.3137 32 42 34.6863 42 38Z" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg v-else-if="step.title=='Share'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-nt-blue">
             <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
           </svg>
-          <h4 class="my-5 text-4xl font-bold">1. Create</h4>
+          <svg v-else-if="step.title=='Get Results'" class="w-10 h-10 text-nt-blue" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <p class="dark:text-white">
+            <path d="M42 42H9.2C8.07989 42 7.51984 42 7.09202 41.782C6.71569 41.5903 6.40973 41.2843 6.21799 40.908C6 40.4802 6 39.9201 6 38.8V6M40 16L32.1623 24.3653C31.8652 24.6823 31.7167 24.8409 31.5375 24.9228C31.3794 24.9951 31.2051 25.0249 31.0319 25.0093C30.8357 24.9916 30.6429 24.8915 30.2574 24.6913L23.7426 21.3087C23.3571 21.1085 23.1643 21.0084 22.9681 20.9907C22.7949 20.9751 22.6206 21.0049 22.4625 21.0772C22.2833 21.1591 22.1348 21.3177 21.8377 21.6347L14 30" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-            There are no limits on the number of input fields in your forms.
-          </p>
-          <div class="mb-8">
-            <div class="flex mt-4">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-1 mr-2 text-nt-blue">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
           </svg>
-              Build a simple form in minutes.
-            </div>
-            <div class="flex mt-4">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-1 mr-2 text-nt-blue">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-              </svg>
-              No coding needed.
-            </div>
-          </div>
-        </div>
-        <div class="flex items-center justify-center relative w-full">
-          <img loading="lazy" class="block rounded-lg shadow-xl w-full" 
-                :src="asset('img/pages/welcome/product_cover.jpg')" alt="cover-product">
-        </div>
-      </div>
 
-      <div class="grid md:grid-cols-2 mt-14">
-        <div class="order-2 md:order-1 flex items-center justify-center relative w-full">
-          <img loading="lazy" class="block rounded-lg shadow-xl w-full" 
-                :src="asset('img/pages/welcome/product_cover.jpg')" alt="cover-product">
-        </div>
-        <div class="order-1 md:order-2 md:ml-10">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-nt-blue">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" />
-          </svg>
-          <h4 class="my-5 text-4xl font-bold">2. Share</h4>
-          <p class="dark:text-white">
-            Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
-          </p>
-          <div class="mb-8">
-            <div class="flex mt-4">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-1 mr-2 text-nt-blue">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-              </svg>
-              Embed into your website.
-            </div>
-            <div class="flex mt-4">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-1 mr-2 text-nt-blue">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-              </svg>
-              Launch in an email.
-            </div>
-            <div class="flex mt-4">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-1 mr-2 text-nt-blue">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-              </svg>
-              Or just share the link.
-            </div>
-          </div>
-        </div>
-      </div>
 
-      <div class="grid md:grid-cols-2 mt-14">
+
-        <div class="mr-10">
+          <h4 class="my-5 text-2xl font-medium">{{index+1}}. {{step.title}}</h4>
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-nt-blue">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
-          </svg>
-          <h4 class="my-5 text-4xl font-bold">3. Get results</h4>
           <p class="dark:text-white">
-            Exercitation veniam consequat sunt nostrud amet.
+            {{step.description}}
           </p>
           <div class="mb-8">
-            <div class="flex mt-4">
+            <div class="flex mt-4" v-for="feature in step.features" :key="feature">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-1 mr-2 text-nt-blue">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
               </svg>
-              See responses and completion rates.
+              {{feature}}
-            </div>
-            <div class="flex mt-4">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-1 mr-2 text-nt-blue">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-              </svg>
-              Generate shareable reports.
-            </div>
-            <div class="flex mt-4">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mt-1 mr-2 text-nt-blue">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-              </svg>
-              Send data to your favourite tools for in-depth analysis.
             </div>
           </div>
         </div>
-        <div class="flex items-center justify-center relative w-full">
+        <div class="w-full md:w-1/2 flex items-center justify-center relative w-full">
-          <img loading="lazy" class="block rounded-lg shadow-xl w-full" 
+          <img loading="lazy" class="block rounded-2xl w-full"
-                :src="asset('img/pages/welcome/product_cover.jpg')" alt="cover-product">
+                :src="asset(step.img)" alt="cover-product">
         </div>
       </div>
 
@@ -119,22 +81,25 @@
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-nt-blue">
             <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
           </svg>
-          <h3 class="my-3 font-bold">Notifications</h3>
+          <h3 class="my-3 font-semibold">Notifications</h3>
           <p>Receive notifications directly in Slack or in your mailbox whenever your from has a new submission (if you want to).</p>
         </div>
         <div class="mb-8 md:mr-10">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-nt-blue">
             <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
           </svg>
-          <h3 class="my-3 font-bold">File Uploads</h3>
+          <h3 class="my-3 font-semibold">File Uploads</h3>
           <p>Easily add file upload inputs to your forms. Uploaded files are securely stored for you. Up to 5mb!</p>
         </div>
         <div class="mb-8 md:mr-10">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-nt-blue">
+          <svg class="w-10 h-10 text-nt-blue" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+            <path d="M4.33331 24C4.33331 35.0457 13.2876 44 24.3333 44C27.647 44 30.3333 41.3137 30.3333 38V37C30.3333 36.0712 30.3333 35.6067 30.3846 35.2168C30.7391 32.5244 32.8578 30.4058 35.5502 30.0513C35.9401 30 36.4045 30 37.3333 30H38.3333C41.647 30 44.3333 27.3137 44.3333 24C44.3333 12.9543 35.379 4 24.3333 4C13.2876 4 4.33331 12.9543 4.33331 24Z" stroke="#155EEF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            <path d="M14.3333 26C15.4379 26 16.3333 25.1046 16.3333 24C16.3333 22.8954 15.4379 22 14.3333 22C13.2287 22 12.3333 22.8954 12.3333 24C12.3333 25.1046 13.2287 26 14.3333 26Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M32.3333 18C33.4379 18 34.3333 17.1046 34.3333 16C34.3333 14.8954 33.4379 14 32.3333 14C31.2287 14 30.3333 14.8954 30.3333 16C30.3333 17.1046 31.2287 18 32.3333 18Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M20.3333 16C21.4379 16 22.3333 15.1046 22.3333 14C22.3333 12.8954 21.4379 12 20.3333 12C19.2287 12 18.3333 12.8954 18.3333 14C18.3333 15.1046 19.2287 16 20.3333 16Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
-          <h3 class="my-3 font-bold">Customize Everything</h3>
+
+          <h3 class="my-3 font-semibold">Customize Everything</h3>
           <p>Change form themes, change texts, colors, add images, add custom thank you pages and much more.</p>
         </div>
       </div>
@@ -142,60 +107,60 @@
 
     <template v-else>
       <div class="mt-10 mb-5 text-center">
-        <h3 class="font-bold text-3xl">And many more features</h3>
+        <h3 class="font-semibold text-3xl">And many more features</h3>
         <p class="w-full mt-2 mb-8">
           OpnForm makes form building easy and comes with powerful features.
         </p>
         <div class="grid md:grid-cols-3 mt-10 mb-5">
-          <div class="flex font-bold my-3">
+          <div class="flex font-semibold my-3">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
             </svg>
             Form logic
           </div>
-          <div class="flex font-bold my-3">
+          <div class="flex font-semibold my-3">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
             </svg>
             URL pre-fill
           </div>
-          <div class="flex font-bold my-3">
+          <div class="flex font-semibold my-3">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
             </svg>
             Unique submission ID
           </div>
-          <div class="flex font-bold my-3">
+          <div class="flex font-semibold my-3">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
             </svg>
             Hidden fields
           </div>
-          <div class="flex font-bold my-3">
+          <div class="flex font-semibold my-3">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
             </svg>
             Form password
           </div>
-          <div class="flex font-bold my-3">
+          <div class="flex font-semibold my-3">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
             </svg>
             Webhooks
           </div>
-          <div class="flex font-bold my-3">
+          <div class="flex font-semibold my-3">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
             </svg>
             Custom code
           </div>
-          <div class="flex font-bold my-3">
+          <div class="flex font-semibold my-3">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
             </svg>
             Closing date
           </div>
-          <div class="flex font-bold my-3">
+          <div class="flex font-semibold my-3">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 text-nt-blue">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
             </svg>

resources/js/pages/home.vue

@@ -6,9 +6,9 @@
           <h2 class="text-nt-blue text-3xl font-bold flex-grow">
             Your Forms
           </h2>
-          <fancy-link v-track.create_form_click class="mt-4 sm:mt-0" :to="{name:'forms.create'}" color="nt-blue" @click="showCreateFormModal=true">
+          <v-button v-track.create_form_click class="mt-4 sm:mt-0" :to="{name:'forms.create'}" @click="showCreateFormModal=true">
             Create a new form
-          </fancy-link>
+          </v-button>
         </div>
         <div v-if="formsLoading" class="text-center">
           <loader class="h-6 w-6 text-nt-blue mx-auto" />

resources/js/pages/settings/admin.vue

@@ -35,10 +35,9 @@
 <script>
 import Form from 'vform'
 import axios from 'axios'
-import FancyLink from '../../components/common/FancyLink'
 
 export default {
-  components: { FancyLink },
+  components: { },
   middleware: 'admin',
   scrollToTop: false,
 

resources/js/pages/templates/show.vue

@@ -19,9 +19,9 @@
             <img :src="template.image_url" alt="" class="w-full shadow-xl rounded-lg my-5"/>
             <div v-html="template.description"></div>
             <div class="mt-5 text-center">
-                <fancy-link class="mt-4 sm:mt-0" :to="{path:'/forms/create?template='+template.slug}" color="nt-blue">
+                <v-button class="mt-4 sm:mt-0" :to="{path:'/forms/create?template='+template.slug}">
                     Use this template
-                </fancy-link>
+                </v-button>
             </div>
 
             <h3 class="text-center text-gray-500">Template Preview</h3>

resources/js/pages/welcome.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="flex flex-col bg-gray-50 dark:bg-notion-dark">
-      <div class="w-full bg-gradient-to-b from-white to-gray-50">
+      <div class="w-full bg-gradient-to-b from-white to-gray-100">
-        <div class="w-full md:mx-auto flex flex-wrap mb-10 md:-mb-64 md:pt-10 relative max-w-5xl">
+        <div class="w-full md:mx-auto flex flex-wrap mb-10 -mb-32 md:-mb-52 lg:-mb-72 md:pt-10 relative max-w-5xl">
           <div
             class="flex flex-col justify-center w-full text-center lg:pr-10 p-6 lg:p-10 relative z-10"
           >
@@ -12,26 +12,24 @@
             <h3 class="mt-6 text-xl text-gray-600 dark:text-gray-400 max-w-xl mx-auto">
               Create beautiful forms and share them anywhere. It takes seconds, you don't need to know how to code
               and <span
-              class="font-semibold"
+              class="font-medium"
             >it's free</span>.
             </h3>
             <div class="mt-6 flex justify-center">
-              <router-link class="mr-1" :to="{ name: 'register' }">
+              <v-button class="mr-1" :to="{ name: 'register' }" :arrow="true">
-                <v-button v-track.welcome_create_form_click :arrow="true" class="py-4" color="blue">
                 Create a form for FREE
               </v-button>
-              </router-link>
             </div>
             <div class="justify-center flex gap-2 mt-10">
               <div class="flex items-center text-gray-400 text-sm">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                     stroke="currentColor" class="w-4 h-4 mt-1 mr-1">
+                     stroke="currentColor" class="w-4 h-4 mr-1">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                 </svg>
                 <span>Unlimited forms</span>
               </div>
               <div class="flex items-center text-gray-400 text-sm">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                      stroke="currentColor" class="w-4 h-4 mr-1">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                 </svg>
@@ -40,22 +38,22 @@
                 </span>
               </div>
               <div class="flex text-gray-400 text-sm">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                     stroke="currentColor" class="w-4 h-4 mt-1 mr-1">
+                     stroke="currentColor" class="w-4 h-4 mr-1">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                 </svg>
                 <span>Unlimited responses</span>
               </div>
             </div>
           </div>
-          <div class="w-full relative px-6 sm:px-10 lg:px-0 z-10 lg:pr-10 flex items-center justify-center">
+          <div class="w-full mt-8 relative px-6 mx-auto max-w-4xl sm:px-10 lg:px-0 z-10 flex items-center justify-center">
-            <img loading="lazy" class="w-full shadow-xl rounded-lg block max-w-2xl lg:max-w-5xl"
+            <img loading="lazy" class="w-full shadow-2xl rounded-xl block max-w-2xl lg:max-w-5xl"
-                 :src="asset('img/pages/welcome/product_cover.jpg')" alt="cover-product">
+                 :src="asset('img/pages/welcome/product-cover.jpg')" alt="cover-product">
           </div>
         </div>
       </div>
 
-      <div class="bg-white dark:bg-notion-dark-light md:pt-64 pb-8">
+      <div class="bg-white dark:bg-notion-dark-light pt-32 md:pt-52 lg:pt-72 pb-8">
         <div class="md:max-w-5xl md:mx-auto w-full">
           <features class="pt-20 pb-8"/>
         </div>

resources/sass/app.scss

@@ -8,8 +8,11 @@ body.dark * {
   @apply border-gray-600
 }
 
-#app {
+* {
   font-family: GeneralSans, sans-serif !important;
+}
+
+#app {
    @apply min-h-screen;
 }
 
@@ -28,7 +31,7 @@ body.dark * {
   }
 
   h2 {
-    @apply text-3xl font-extrabold;
+    @apply text-3xl font-semibold;
   }
 
   a {