docs: replace vuepress docs dir with vitepress docs dir

docs/components/Repl.vue

@@ -36,9 +36,11 @@ const store = new ReplStore({
   outputMode: 'preview',
 })
 
+const vh = useCssVar('--vh')
+
 watchEffect(
   () => {
-    document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`)
+    vh.value = `${window.innerHeight}px`
   },
   { flush: 'post' },
 )
@@ -99,12 +101,14 @@ const sfcOptions = {
 }
 
 .vue-repl {
+  --vh: 100vh;
+
   @apply rounded-lg border-1 border-solid dark:border-gray-200/10 border-gray-200;
 
-  height: calc(var(--vh) - var(--navbar-height));
+  height: calc(var(--vh) - 72px);
 }
 
 .msg.err {
-  display: none;
+  @apply hidden;
 }
 </style>

docs/components/examples/teleport/style.css

@@ -71,7 +71,7 @@
   gap: 5px;
 }
 
-.button {
+.buttons .button {
   background-color: whitesmoke;
   cursor: pointer;
   padding: 5px 10px;
@@ -82,7 +82,7 @@
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
-.button:hover {
+.buttons .button:hover {
   background: black;
   color: white;
 }

docs/components/home/Acknowledgement.vue

@@ -3,8 +3,8 @@ import Heart from '~icons/mdi/heart'
 </script>
 
 <template>
-  <div id="acknowledgement" class="w-full dark:(bg-black text-white) border-y-1 border-white">
-    <div class="max-w-11/12 md:max-w-6/12 m-auto py-4 md:(pb-12 pt-6) text-center">
+  <div id="acknowledgement" class="w-full">
+    <div class="max-w-[1024px] md:max-w-3/4 m-auto py-4 md:(pb-12 pt-6) text-center">
       <div>
         <h1 class="md:mb-8 flex justify-center items-center"><Heart class="text-red-500" /> Acknowledgement</h1>
         <strong>First off</strong>: A big thank you to the developers of

docs/components/home/Banner.vue

@@ -8,7 +8,7 @@ const npmData = await $fetch('https://api.npmjs.org/downloads/point/last-month/@
 </script>
 
 <template>
-  <div class="w-full dark:(bg-black text-white border-white) border-black border-y-1">
+  <div class="w-full dark:(border-white) border-black border-y-1">
     <div class="max-w-full md:max-w-11/12 m-auto py-4 md:py-12 <md:(dark:border-t-1 border-white)">
       <div class="grid md:grid-cols-3 gap-3 text-center <md:divide-y md:divide-x dark:divide-white divide-black">
         <div class="grid grid-rows-auto gap-2 py-4 md:py-0">

docs/components/home/Features.vue

@@ -24,7 +24,7 @@ onBeforeUnmount(stop)
 </script>
 
 <template>
-  <div ref="el" class="w-full dark:(bg-black text-white)">
+  <div ref="el" class="w-full">
     <div
       class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left"
     >

docs/components/home/Team.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { VPTeamMembers } from 'vitepress/theme'
+
+const members = [
+  {
+    avatar: 'https://avatars.githubusercontent.com/u/78412429?v=4',
+    name: 'Burak Cakmakoglu',
+    title: 'Creator',
+    links: [{ icon: 'github', link: 'https://github.com/bcakmakoglu' }],
+  },
+]
+</script>
+
+<template>
+  <div class="w-full flex flex-col gap-4">
+    <h1 class="md:mb-8 flex justify-center items-center">Meet the Team</h1>
+    <VPTeamMembers size="small" :members="members" />
+  </div>
+</template>

docs/components/home/flows/Intro.vue

@@ -239,7 +239,7 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
 </script>
 
 <template>
-  <VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
+  <VueFlow ref="el">
     <XyzTransition xyz="fade down ease-out-back duration-10" mode="out-in">
       <Background v-if="animatedBackground">
         <template #pattern-container="{ id }">
@@ -306,21 +306,21 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
       </template>
       <template v-else-if="props.id === 'documentation'">
         <div class="flex">
-          <router-link class="link group bg-[#f15a16]" to="/guide/"> Read The Documentation </router-link>
+          <router-link class="intro-link group bg-[#f15a16]" to="/guide/"> Read The Documentation </router-link>
         </div>
         <Handle type="target" :position="Position.Top" />
         <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
       </template>
       <template v-else-if="props.id === 'examples'">
         <div class="flex">
-          <router-link class="link group bg-[#ef467e]" to="/examples/"> Check The Examples </router-link>
+          <router-link class="intro-link group bg-[#ef467e]" to="/examples/"> Check The Examples </router-link>
         </div>
         <Handle type="target" :position="Position.Top" />
         <Handle class="block md:hidden" type="source" :position="Position.Bottom" />
       </template>
       <template v-else-if="props.id === 'acknowledgement'">
         <div class="flex" @click="scrollTo">
-          <button class="link group bg-sky-500"><Heart class="text-red-500" /> Acknowledgement</button>
+          <button class="intro-link group bg-sky-500"><Heart class="text-red-500" /> Acknowledgement</button>
         </div>
         <Handle type="target" :position="Position.Top" />
       </template>
@@ -431,7 +431,7 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
   hover:(ring ring-white);
 }
 
-.link {
+.intro-link {
   @apply flex
   gap-3
   items-center