docs: replace vuepress specific components

docs/components/home/Features.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import type { VueFlowStore } from '@braks/vue-flow'
+import Basic from './flows/Basic.vue'
+import RGB from './flows/RGB.vue'
+import Nested from './flows/Nested.vue'
+import Additional from './flows/Additional.vue'
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-const el = ref()
+const el = ref<HTMLDivElement>()
 const instances: VueFlowStore[] = []
 
 const onLoad = (instance: VueFlowStore) => {

docs/components/home/flows/Additional.vue

@@ -106,7 +106,7 @@ onPaneReady((i) => emit('pane', i))
         <br />
         Plus it's built for composition, making the access of the internal state easy as can be!
       </p>
-      <router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
+      <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
     </div>
   </div>
 </template>

docs/components/home/flows/Basic.vue

@@ -111,7 +111,7 @@ onConnect((param) => {
         Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable
         elements, customizable nodes and edges and a bunch of event handlers.
       </p>
-      <router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
+      <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
     </div>
   </div>
   <div

docs/components/home/flows/Nested.vue

@@ -65,7 +65,7 @@ onPaneReady((i) => emit('pane', i))
         <br />
         No worries! Vue Flow supports creating nested nodes and nested graphs out-of-the-box.
       </p>
-      <router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
+      <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
     </div>
   </div>
   <div

docs/components/home/flows/RGB.vue

@@ -108,7 +108,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
         You can expand on the existing features by using your own custom nodes and edges and implement any design and
         functionality you want.
       </p>
-      <router-link class="docs-button max-w-max" to="/guide/">Documentation</router-link>
+      <a class="docs-button max-w-max" href="/guide/">Documentation</a>
     </div>
   </div>
 </template>