Started to refactor pages

client/components/global/Navbar.vue

@@ -119,7 +119,7 @@
                     Login
                   </router-link>
 
-                  <v-button v-track.nav_create_form_click size="small" :to="{ name: 'forms.create.guest' }" color="outline-blue" :arrow="true">
+                  <v-button v-track.nav_create_form_click size="small" :to="{ name: 'forms-create-guest' }" color="outline-blue" :arrow="true">
                     Create a form
                   </v-button>
                 </div>

client/components/open/forms/components/FormFieldsEditor.vue

@@ -279,7 +279,7 @@ export default {
       ]
     },
     init () {
-      if (this.$route.name === 'forms.create' || this.$route.name === 'forms.create.guest') { // Set Default fields
+      if (this.$route.name === 'forms.create' || this.$route.name === 'forms-create-guest') { // Set Default fields
         this.formFields = (this.form.properties.length > 0) ? clonedeep(this.form.properties) : this.getDefaultFields()
       } else {
         this.formFields = clonedeep(this.form.properties).map((field) => {

client/components/pages/welcome/AiFeature.vue

@@ -64,7 +64,7 @@
               </ul>
 
               <div class="mt-6 sm:mt-8 flex text-center justify-center lg:justify-start">
-<!--                <v-button v-if="!authenticated" class="mr-2 block" :to="{ name: 'forms.create.guest' }" :arrow="true">-->
+<!--                <v-button v-if="!authenticated" class="mr-2 block" :to="{ name: 'forms-create-guest' }" :arrow="true">-->
 <!--                  Get started for free-->
 <!--                </v-button>-->
 <!--                <v-button v-else class="mr-2 block" :to="{ name: 'forms.create' }" :arrow="true">-->

client/components/pages/welcome/Testimonials.vue

@@ -1,5 +1,5 @@
 <template>
-  <iframe v-if="!isDarkMode" id="testimonialto-carousel-all-notionforms"
+  <iframe v-if="!isDark" id="testimonialto-carousel-all-notionforms"
           loading="lazy"
           src="https://embed.testimonial.to/carousel/all/notionforms?theme=light&autoplay=on&showmore=on&one-row=on&same-height=off"
           frameBorder="0" scrolling="no" width="100%"
@@ -8,6 +8,8 @@
 </template>
 
 <script>
+import {useDark} from "@vueuse/core";
+
 export default {
 
   props: {
@@ -18,9 +20,10 @@ export default {
   },
   data: () => ({}),
 
-  computed: {
-    isDarkMode () {
-      return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+  setup () {
+    const isDark = useDark()
+    return {
+      isDark
     }
   },