✨ feat(docs): add demo.vue component and update index.vue component

🆕 Add a new component called demo.vue to the docs directory. This component represents a demo page and includes a main section with an h1 heading. It also imports and uses the `useSeoMeta` and `definePageMeta` functions from the `#imports` module to define the page's metadata, including the layout, meta title, meta description, and Twitter card type.

🔄 Update the index.vue component in the docs directory. The main section now has a class of "bg-base-200" for styling purposes. The h1 heading has been changed to "Getting Started". The `useSeoMeta` and `definePageMeta` functions are also updated to reflect the new meta title and meta description for the page.

🆕 Add a new component called partners.vue to the pages directory. This component represents a partners page and includes a main section with an h1 heading. It also imports and uses the `useSeoMeta` and `definePageMeta` functions from the `#imports` module to define the page's metadata, including the layout, meta title, meta description, and Twitter card type.

The changes were made to improve the documentation pages of the Vue Stripe application. The new demo page provides a template for showcasing demos, while the updated index page and the new partners page have improved metadata for better search engine optimization and social media sharing.

src/pages/docs/demo.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>Demo</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'Demo - Vue Stripe Docs';
+    const metaDescription = 'Demo for Vue Stripe.';
+
+    useSeoMeta({
+      title: metaTitle,
+      ogTitle: metaTitle,
+      description: metaDescription,
+      ogDescription: metaDescription,
+      // image: ogBanner,
+      // ogImage: ogBanner,
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
+      twitterCard: 'summary_large_image',
+    });
+  },
+};
+</script>

src/pages/docs/index.vue

@@ -1,7 +1,6 @@
 <template>
-  <main>
-    <b>Hello HAHAHA</b>
-    <ContentDoc path="/docs/about" />
+  <main class="bg-base-200">
+    <h1>Getting Started</h1>
   </main>
 </template>
 
@@ -11,11 +10,11 @@ import { useSeoMeta, definePageMeta } from '#imports';
 export default {
   setup () {
     definePageMeta({
-      layout: 'blank',
+      layout: 'docs',
     });
 
-    const metaTitle = 'Home - Joff Tiquez';
-    const metaDescription = 'Web Developer from 🇵🇭';
+    const metaTitle = 'Geting Started - Vue Stripe Docs';
+    const metaDescription = 'Get started with Vue Stripe.';
 
     useSeoMeta({
       title: metaTitle,
@@ -24,8 +23,8 @@ export default {
       ogDescription: metaDescription,
       // image: ogBanner,
       // ogImage: ogBanner,
-      url: 'https://jofftiquez.com/gui',
-      ogUrl: 'https://jofftiquez.com/gui',
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
       twitterCard: 'summary_large_image',
     });
   },

src/pages/partners.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>Partners</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'default',
+    });
+
+    const metaTitle = 'Partners - Vue Stripe';
+    const metaDescription = 'Partners of Vue Stripe.';
+
+    useSeoMeta({
+      title: metaTitle,
+      ogTitle: metaTitle,
+      description: metaDescription,
+      ogDescription: metaDescription,
+      // image: ogBanner,
+      // ogImage: ogBanner,
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
+      twitterCard: 'summary_large_image',
+    });
+  },
+};
+</script>